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本 书 适合 有 JavaScript 基础 的 前 端 开发 人 员 。 
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这 是 一 本 关于 React 的 入 门 书 。 


React 在 近年 来 广 受 关注 ， 其 声明 式 UI、 组 件 化 的 思想 让 开发 和 维护 具有 复杂 交互 性 的 界 
面 变 得 更 容易 。 目 前 ， 前 端 社区 中 不 断 涌 现 出 各 种 构建 React 应 用 的 方案 ， 各 种 前 端 技 术 
会 议 也 多 次 提 及 与 React 相关 的 主题 。 可 以 说 ，React 生态 圈 正 朝 着 越 来 越 好 的 方向 发 展 。 
在 翻译 本 书 时 ， 我 和 我 的 开发 团队 正在 使 用 React、Redux 和 Webpack 作为 主要 的 前 端 技 
术 栈 。 我 们 最 直观 的 感受 就 是 开发 过 程 非常 恰 悦 ， 思 路 也 更 为 清晰 。 


互联 网 上 已 经 有 不 少 关 于 React 的 学 习 资 料 ， 但 是 本 书 的 两 个 特点 让 其 脱颖而出 。 一 是 本 
书 作者 Stoyan 就 职 于 Facebook， 对 自家 开发 的 技术 自然 了 解 得 更 加 透彻 ， 二 是 本 书 把 讨 
论 重点 放 在 React 本 身 ， 避 免 初学 者 因为 React 相关 技术 栈 过 于 庞大 而 望而却步 。 有 一 种 
常见 的 误解 是 : 你 需要 花费 大 量 时 间 在 配置 工具 上 ， 然 后 才能 开始 学 习 React; 但 其 实 真 
相 并 非 如 此 。 在 本 书 中 ， 我 们 将 从 零 开 始 构建 一 个 React 应 用 。 读 者 可 以 在 掌握 React 基 
础 后 ， 进 行 下 一 步 的 学 习 。 
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大 约 2000 4E, FNL XLE im Be FH A HIM ZBL, RRA ERRER , 
APPR. REEERE FTP 把 我 新 建 的 站 点 CSSsprites.com 传送 到 服务 器 并 向 全 世界 发 
布 。 在 发 布 的 前 几 个 晚上 ， 我 一 直 在 思考 一 个 问题 “到 底 为 什么 只 把 20% 的 工作 量 放 在 
解决 应 用 的 主要 问题 上 ， 却 把 剩 下 的 80% 花费 在 努力 克服 用 户 界面 的 问题 上 呢 ? ”如 果 
能 把 所 有 调用 getELementById() 和 考虑 应 用 状态 〈 用 户 上 传 是 否 完成 ? 如果 上 传 出 错 ， 上 
传 对 话 框 是 否 要 继续 显示 ? ) 的 时 间 市 约 出 来 ， 我 能 利用 这 部 分 时 间 完 成 多 少 其 他 的 工具 
WE? 为 什么 界面 开发 这 么 耗 时 ? 如 何 处 理 不 同 训 览 器 之 间 的 差异 ? 想到 这 些 ， 我 的 大 好 心 
情 荡然 无 存 。 




































































时 间 快 进 到 2015 年 3 月 。 在 当时 召开 的 Facebook F8 开发 者 大 会 上 ， 我 所 在 的 团队 准备 公 
布 两 个 完全 重 写 的 Web 应 用 : 一 个 第 三 方 评论 模块 和 一 个 配套 的 评论 审核 工具 。 和 我 的 小 
应 用 CSSsprites.com 相 比 ， 这 两 个 应 用 非常 成 熟 ， 功 能 也 复杂 得 多 ， 并 且 流 量 非常 大 。 虽 
然 如 此 ， 甚 开发 过 程 依 然 令 人 愉悦 。 团 队 中 的 新 成 员 (其 至 包括 刚 接触 JavaScript 和 CSS 
的 新 手 ) 都 能 很 快 地 融入 其 中 ， 轻 松 高 效 地 贡献 功能 特性 并 改进 现 有 代码 。 团 队 中 的 一 个 
成 员 说 :“ 现 在 我 发 现 这 就 是 自己 热爱 的 一 切 ! ” 





























在 这 段 时 间 里 发 生 了 什么 ? 答案 是 : React 诞生 了 。 








React 是 一 个 UI 库 ， 让 你 只 需 定义 一 次 用 户 界面 ， 就 可 以 将 其 用 在 多 个 地 方 。 之 后 ， 当 应 
用 的 状态 (state) 发 生变 化 时 ，React 将 会 自动 作出 反应 、 更 新 界面 ， 你 无 需 做 其 他 任何 工 
作 。 毕 竟 你 已 经 定义 了 用 户 界面 。 尽 管 说 是 定义 ， 其 实 代 码 更 加 偏向 声明 式 ， 你 可 以 使 用 
可 管理 的 小 型 组 件 构造 出 一 个 强大 的 应 用 。 你 再 也 不 需要 在 函数 里 花费 一 半 的 代码 量 寻 找 
DOM 节点 了 ， 而 是 可 以 只 维护 应 用 的 状态 (通过 常规 的 JavaScript 对 象 ) ， 把 剩 下 的 工作 


都 交 给 React 帮 有 你 完成 。 























学 习 React 非常 划算 。 一 旦 学 会 这 个 库 ， 便 可 以 使 用 它 构建 以 下 类 型 的 应 用 : 


XV 


。 Web 应 用 

。 原生 iOS 和 Android 应 用 
。 Canvas 应 用 

。 TV 应 用 

。 原生 桌面 应 用 
你 可 以 使 用 与 构造 组 件 和 用 户 界 面相 同 的 思路 ， 创 建 具 有 原生 应 用 性 能 和 控制 能 力 的 原生 


应 用 (真正 的 原生 控制 ， 而 不 仅仅 是 看 起 来 像 原 生 )。 这 并 不 是 指 “ 一 次 编写 ， 到 处 运行 ” 
(我 们 的 技术 尚未 实现 这 一 点 )， 而 是 “一 次 学 习 ， 到 处 使 用 ”。 


























简 而 言 之 ， 学 习 React 可 以 帮 你 节省 80% 的 时 间 ， 使 你 可 以 把 精力 集中 在 主要 问题 上 (e 
如 你 的 应 用 存在 的 真正 目的 )。 


关于 本 书 


本 书 从 Web 开发 的 角度 介绍 如 何 学 习 React。 在 前 3 章 ， 你 将 从 一 个 空白 的 HTML 页 面 开 
始 构建 应 用 。 这 使 得 你 可 以 将 关注 点 放 在 React 本 身 ， 无 需 了 解 任何 新 语法 或 者 辅助 工具 。 





























第 4 章 介绍 JSX。 这 是 一 项 单独 、 可 选 的 技术 ， 通 常会 同 React 一 起 使 用 。 





从 第 5 章 开始 ， 你 将 学 习 在 实际 开发 中 可 能 用 到 的 一 些 附加 工具 。 介 绍 的 例子 包括 
JavaScript 打包 工具 (Browserify)、 单 元 测试 (Jest) 、 语 法 检查 (ESLint), 282! (Flow), 
在 应 用 中 组 织 数据 流 (Flux) 以 及 不 可 变数 据 (Immutable.js)。 所 有 关于 这 些 辅助 技术 的 
讨论 都 会 力求 简化 ， 让 你 依然 将 精力 放 在 React 上 。 你 会 很 快 熟悉 这 些 工具 的 使 用 ， 并 能 
根据 具体 情况 选择 使 用 哪些 工具 。 


视 你 在 学 习 React 的 过 程 中 一 切 顺利 ， 大 有 收获 ! 


排版 约定 


本 书 使 用 下 列 排版 约定 。 

















。 等 宽 字 体 (Constant width) 
表示 广义 上 的 计算 机 编码 ， 包 括 变量 或 函数 名 、 数 据 库 、 数 据 类 型 、 环 境 变量 、 话 名 
和 关键 字 。 

。 等 宽 粗 体 (Constant width bold) 
表示 应 该 由 用 户 按照 字面 输入 的 命令 或 其 他 文本 。 





























。 等 宽 和 斜体 (Constant width italic) 
表示 应 该 由 用 户 替换 或 取决 于 上 下 文 的 值 。 
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该 图 标 表示 提示 或 建议 。 


该 图 标 表示 一 般 说 明 。 





该 图 标 表示 警告 或 提醒 。 


代码 示例 

补充 材料 〈 包 括 代 码 示 例 、 练 习题 等 ) 可 以 从 https://github.com/stoyan/reactbook 下 载 。 
本 书 旨 在 帮助 你 做 好 工作 。 一 般 来 说 ， 你 可 以 在 程序 和 文档 中 使 用 本 书 的 代码 。 除 非 你 使 
用 了 很 大 一 部 分 代码 ， 否 则 无 需 联系 我 们 获取 许可 。 例 如 ， 使 用 来 自 本 书 的 几 段 代码 编写 
一 个 程序 不 需要 许可 。 销 售 和 分 发 O'Reilly 书 中 用 例 的 光盘 需要 许可 。 通 过 引用 本 书 用 例 
和 代码 来 回答 问题 不 需要 许可 。 把 本 书 中 的 大 量 用 例 代 码 并 入 你 的 产品 文档 需要 许可 。 























我 们 很 希望 但 不 强求 注 明 信 息 来 源 。 一 条 信息 来 产 通常 包括 书 名 、 作 者 、 出 版 社 和 ISBN。 
例如 : “React: Up & Running by Stoyan Stefanov (O’Reilly). Copyright 2016 Stoyan Stefanov, 
978-1-491-93182-0" , 























如 果 你 感到 对 示例 代码 的 使 用 超出 了 正当 引用 或 者 这 里 给 出 的 许可 范围 ， 请 随时 通过 
permissions @oreilly.com 联系 我 们 。 


Safari? 在 线 图 书 


Safari Books Online (http://www.safaribooksonline.com) 是 应 运 

Sa fa of 而 生 的 数字 图 书馆 。 它 同时 以 图 书 和 视频 的 形式 出 版 世界 顶级 

Books online ” ”技术 和 商务 作家 的 专业 作品 。 技 术 专 家 、 软 件 开发 人 员 、Web 

设计 师 、 商 务 人 士 和 创意 专家 等 ， 在 开展 调研 、 解 决 问题 、 学 习 和 认证 培训 时 ， 都 将 
Safari Books Online 视 作 获取 资料 的 首选 渠道 。 


对 于 组 织 团 体 、 政 府 机 构 和 个 人 ，Safari Books Online 提供 各 种 产品 组 合 和 灵活 的 定 









































价 策略 。 用 户 可 通过 一 个 功能 完备 的 数据 库 检 索 系 统 访 问 O'Reilly Media, Prentice 


Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit 

















Press, Focal Press. Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM 
Redbooks, Packt, Adobe Press, FT Press. Apress. Manning, New Riders, McGraw-Hill, 
Jones & Bartlett, Course Technology 以 及 其 他 几 十 家 出 版 社 的 上 千 种 图 书 、 培 训 视频 和 正 
式 出 版 之 前 的 书稿 。 要 了 解 Safari Books Online 的 更 多 信息 ， 我 们 网 上 见 。 





联系 我 们 


请 把 对 本 书 的 评价 和 问题 发 给 出 版 社 。 








美国 : 


O’Reilly Media, Inc. 


1005 Gravenstein Highway North 


Sebastopol, CA 95472 


中 国 : 











北京 市 西城 区 西直门 南大 街 2 号 成 铭 大 厦 C 座 807 (100035) 








奥 莱 利 技术 咨询 (北京 ) 


有 限 公 司 





O'Reilly 的 每 一 本 书 都 有 专 居 








网 页 ， 你 可 以 在 那里 找到 本 





例 以 及 其 他 信息 o 本 书 的 网 站 地 址 是 : 
http://shop.oreilly.com/product/0636920042266.do 


对 于 本 书 的 评论 和 技术 性 问题 ， 请 发 送 电子 邮件 到 : 





bookquestions@oreilly.co 


m 


要 了 解 更 多 O'Reilly 图 书 、 培 训 课程 、 会 议和 新 闻 的 信息 ， 





http://www.oreilly.com 


我 们 在 Facebook 的 地 址 如 下 











http://facebook.com/oreilly 


请 关注 我 们 的 Twitter 动态 : 


http://twitter.com/oreillymedia 


我 们 的 YouTube 视频 地 址 如 下 : 
http://www.youtube.com/oreillymedia 





BAe, 


请 访问 以 下 网 站 : 
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第 1 章 


Hello World 





让 我 们 踏 上 使 用 React 开发 应 用 的 旅程 吧 。 在 这 一 章 里 ， 你 将 学 习 如 何 设置 React 并 编写 
你 的 第 一 个 Hello World 应 用 。 


i ig 
首先 需要 获取 一 份 React 库 的 源 代码 。 所 幸 的 是 ， 这 个 过 程 非常 简单 。 











访问 http://reactjs.com (这 个 网 站 会 重 定 向 到 React 的 官方 GitHub 页 面 ， 即 http://facebook. 
github.io/react/)， 然 后 点 击 Download 按钮 ， 再 点 击 Download Starter Kit， 即 可 获得 一 份 
ZIP 文件 。 解 压 该 文件 ， 并 把 压缩 包 中 的 目录 复制 到 一 个 方便 找到 的 地 方 。 


例如 : 








mkdir ~/reactbook 
mv ~/Downloads/react-0.14.7/ ~/reactbook/react 


现在 你 的 工作 目录 (reactbook) 应 该 如 图 1-1 所 示 。 


现在 ， 我 们 只 使 用 其 中 的 ~/reactbook/react/build/react.js 文件 。 我 们 会 在 后 续 的 学 习 中 逐步 
介绍 其 他 文件 的 使 用 。 





需要 注意 的 是 ，React 并 没有 强制 规定 任何 目录 结构 。 因 此 ， 你 可 以 根据 具体 情况 把 React 
移动 到 其 他 目录 ， 或 者 对 react.js 文件 进行 重 命名 操作 。 












































@0e E reactbook 
3 Em io By =v 
Name a Size Kind 
v i react = Folder 
v MM build = Folder 
|@) react-dom-server.js 1 KB JavaScript 
|®| react-dom-server.min.js 725 bytes JavaScript 
[è] react-dom.js 1KB JavaScript 
|@) react-dom.min.js 706 bytes JavaScript 
二 react-with-addons.js 708 KB JavaScript 
® react-with-addons.min.js 148 KB JavaScript 
[® react.js 641 KB JavaScript 
名 react.min.js 136KB JavaScript 
> [m examples 一 Folder 
README.md 5 KB Markdown 














1-1: 你 的 React 目录 列表 


1.2 Hello React World 


我 们 首先 在 工作 目录 中 编写 一 个 简单 的 页 面 (~/reactbook/01.01.hello.html) : 


<!DOCTYPE htmL> 
<html> 
<head> 


<title>Hello React</title> 
<meta charset="utf-8"> 


</head> 
<body> 
<div id="app"> 


<l- -应 用 泻 染 的 位 置 --> 


</div> 


<script src="react/build/react.js"></script> 


<script src="react/build/react-dom. js"></script> 


<script> 


// 应 用 的 Javascript 代 码 


</script> 
</body> 
</html> 


你 可 以 在 附带 的 代码 库 (https://github.com/stoyan/reactbook/) 


用 的 所 有 代码 。 


中 找到 本 











该 文件 仅 有 两 个 值得 我 们 注意 的 地 方 : 


。 引入 了 React 库 及 其 DOM 插件 库 (通过 <script src> 标签 ) ， 
。 定义 了 这 个 应 用 应 该 出 现在 页 面 上 的 位 置 ((<dtv id="app">)), 

















既 可 以 在 React 应 用 中 混用 常规 HTML 内容 以 及 其 他 JavaScript 库 ， 也 可 以 
在 一 个 页 面 内 使 用 多 个 React 应 用 。 只 需要 在 DOM 结构 中 给 React JRE YE 
染 内 容 的 位 置 即 可 。 











现在 我 们 添加 一 段 输出 Hello world! 的 代码 。 修 改 01.01.hello.html 文件 ， 把 JavaScript 注释 
替换 为 如 下 代码 : 
ReactDOM.render( 
React.DOM.h1(null, "Hello world!"), 


document.getElementById("app") 
); 


在 浏览 器 中 打开 01.01.hello.html 后 ， 可 以 看 到 新 的 代码 在 应 用 中 生效 了 (如 图 1-2 所 示 )。 











Hello world! 
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<html> 
> <head>..</head> 
v <body> 
v <div id="app"> 
</div> 
<script src="react/build/react.js"></script> 
<script src="react/build/react-dom. js"></script> 
v<script> 
ReactDOM. render( 
React.DOM.h1(null, "Hello world!"), 
document.getElementById("app") 
); 





</script> 
</body> 
</html> 











图 1-2: 修改 后 的 Hello World 应 用 


恭喜 ， 现 在 你 完成 了 第 一 个 React 应 用 | 





图 1-2 中 的 Chrome 开发 者 工具 显示 了 React 生 成 的 代码 结构 。 从 中 可 以 看 到 ，<div 
id="app"> 中 的 占 位 符 被 React 应 用 生成 的 新 内 容 所 代替 。 





HelloWorld | 3 





1.3 刚才 发 生 了 什么 


你 的 第 一 个 应 用 之 所 以 成 功 运行 ， 是 因为 在 代码 内 部 发 生 了 一 些 有 趣 的 事情 。 














首先 ， 我 们 使 用 了 React 对 象 ， 所 有 可 用 的 API 都 可 通过 该 对 象 进行 调用 。 实 际 上 ，React 
在 设计 API 时 注重 简化 ， 所 以 需要 记忆 的 方法 名 称 并 不 多 。 


然后 ， 我 们 使 用 了 ReactDoM 对 象 。 这 个 对 象 只 包含 几 个 方法 ， 其 中 render() 方法 是 最 有 
用 的 。 在 旧版 本 中 ， 这 些 方法 曾经 属于 React 对 象 ， 但 从 0.14 版 本 开始 ， 它 们 被 分 离 出 
来 ， 目 的 是 强调 应 用 泻 染 实际 上 属于 单独 的 概念 。 这 是 因为 ， 你 创建 的 React 应 用 还 可 以 
演 染 到 不 同 的 环境 中 ， 比 如 HTML (浏览 器 DOM)、canvas、 原 生 的 Android 或 iOS 应 用 。 




















接 下 来 ， 我 们 需要 关注 组 件 的 概念 。 组 件 可 以 用 于 构建 用 户 界面 ， 并 通过 任何 适当 的 方 
式 进 行 组 合 。 在 实际 应 用 中 ， 你 需要 创建 自 定义 组 件 ， 但 在 起 步 阶段 ， 我 们 先 学 习 使 用 
React HE EWI—7 M88, CATAR HTML DOM 元 素 。 该 包 庄 层 可 通过 React.DOM 对 象 
进行 调用 。 在 第 一 个 例子 中 ， 我 们 使 用 了 hi 组 件 。 它 对 应 于 HTML 的 <hi 元 素 ， 可 以 使 
用 React .DOM.h1() 方法 进行 调用 。 























最 后 ， 我 们 调用 了 熟悉 的 document.getElementById("app") 方法 访问 DOM 市 点 。 函 数 调 
用 通过 该 参数 告诉 React 需要 把 应 用 渲染 在 页 面 的 哪个 部 分 。 因 此 ， 这 是 连接 你 所 熟知 的 
DOM 操作 到 React 新 大 陆 的 一 座 桥梁 。 








一 旦 跨 过 了 从 DOM 到 React 的 桥梁 ， 你 就 不 需要 再 进行 DOM 操作 了 ， 
为 React 实现 了 从 组 件 到 基础 平台 (浏览 器 DOM、canvas、 原 生 应 用 ) 的 转 
化 。 你 无 需 再 关心 DOM， 但 这 并 不 意味 着 不 能 操作 DOM, React 为 开发 者 
提供 了 选择 的 自由 ， 你 可 以 根据 具体 情况 ， 随 时 回 到 DOM 操作 的 怀抱 当中 。 





理解 了 每 行 代码 的 作用 之 后 ， 让 我 们 回顾 整 段 代码 。 刚 才 发 生 的 事情 是 : 在 你 选择 的 
DOM 节点 中 这 染 了 一 个 React 组 件 。 浑 染 过 程 从 一 个 顶层 组 件 开始 ， 而 顶层 组 件 可 以 按 需 
包含 许多 子 元 素 ( 子 元 素 中 还 可 以 符 套 子 元 素 )。 实 际 上 ， 尽 管 这 是 一 个 简单 的 例子 ， 但 
hi 组件 中 仍然 包含 一 个 子 元 素 ， 即 文本 Hello world!。 








1.4 React.DOM.* 


现在 ， 你 知道 可 以 通过 React. DOM 对 象 把 各 种 各 样 的 HTML 元 素 当 作 React 组 件 使 用 。( 图 
1-3 展示 了 如 何 通 过 浏览 器 控制 台 获 取 React.DOM 对 象 的 完整 属性 列表 。) 接 下 来 我 们 将 深 
入 了 解 这 个 API。 











RO Elements Console Sources Network 





© Y <top frame> v (Preserve log 


> Object.keys(React.DOM) 


v Array [132] 
v [0 .. 99] 

0: "a" 
"abbr" 
"address" 
"area" 
"article" 
"aside" 
"audio" 
"up" 
"base" 
"bdi" 

10: "bdo" 
11: "big" 
12: "blockquote" 


Do au 和 上 wN 


21: "colgroup" 
22: "data" 
23: "datalist" 








B 1-3; React.DOM 的 属性 列表 


注意 React .DOM 和 ReactDOM 的 区 别 。 前 者 是 预定 义 好 的 HTML 元 素 集 合 ， 而 
后 者 是 在 浏览 器 中 泻 染 应 用 的 一 种 途径 (参考 ReactDOM.render() 方法 )。 











我 们 首先 看 看 React.DOM.* 方法 接收 的 参数 。 回 顾 上 述 Hello World 应 用 的 代码 : 





ReactDOM. render( 
React.DOM.hi(null, "Hello world!"), 
document.getELementById("app") 

)3 


h1() 方法 的 首 个 参数 接收 一 个 对 象 〈 在 这 个 例子 中 是 空 对 象 nutL) ， 用 于 指定 该 组 件 的 任 
何 属性 (比如 DOM 属性 )。 例 如 给 组 件 传递 id 属性 : 








React.DOM.h1( 
{ 
id: "my-heading", 
}, 
"Hello world!" 
)， 


上 述 例子 生成 的 HTML 结构 如 图 1-4 所 示 。 
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Hello world! 





h1#my-heading 1069px x 37px 





ROD Elements Console Sources Network Timeline 


<html> 
> <head>..</head> 
v <body> 

v <div id="app"> 


</div> 
<script src="react/build/react.js"></script> 
<script src="react/build/react-dom.js"></script> 
> <script>..</script> 
</body> 
</html> 














<h1 id="my-heading" data-reactid=".@">Hello world!</h1> 


Profiles 





1-4; 调用 React .Dom 生成 的 HTML 代码 


iiy — 





第 二 个 参数 (在 这 个 例子 中 是 "Hello world!") 定义 了 该 组 件 的 子 元 素 。 最 从 





简单 的 子 元 素 
a 


就 是 上 述 例子 中 的 文本 〈 在 DOM 结构 中 是 一 个 文本 节点 )。 此 外 ， 你 还 可 以 通过 传递 更 多 


的 函数 参数 ， 进 行 子 元 素 的 组 合 与 出 套 。 比 如 : 


React.DOM.h1( 
{id: "my-heading"}, 
React.DOM.span(null, "Hello"), 
" world!" 


)， 


再 看 另 一 个 例子 ， 这 一 次 调用 了 多 重 诅 套 的 组 们 
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(结果 如 图 1-5 所 示 ) : 


React .DOM.h1( 
{id: "my-heading"}, 
React .DOM.span(null, 
React.DOM.em(null, "Hell"), 


o 


world!" 











Hello world! 
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<html> 
> <head>...</head> 
v <body> 
Vv<h1 id=""my-heading" data-reactid=". 0"> 
了 <span data-reactid=".0.0"> 
<em data-reactid=".0.0.0">Hell</em> 
<span data-reactid=".0.0.1">0</span> 
</span> 
<span data-reactid=".0.1"> world!</span> 
</h1> 
</div> 
<script src="react/build/react.js"></script> 
<script src="react/build/react-dom. js"></script> 
> <script>..</script> 
</body> 
</html> 








1-5; React .DOM #REIARAEALG HTML 结构 





BUR TOL, HRF eet ee ei, ELA BES REI AY BCAA 
和 圆 括号 。 为 了 简化 工作 ， 你 可 以 使 用 JSX 语法 。 我 们 会 在 第 4 章 将 ISX 
作为 独立 的 主题 进行 探讨 ， 在 此 之 前 ， 我 们 暂且 使 用 这 种 纯 JavaScript 语法 。 
原因 在 于 JSX 会 引起 一 些 和 争议 : 人 们 在 第 一 次 接触 JSX 时 通常 会 感到 排斥 
( 啊 ， 要 在 JavaScript 中 插入 XML ! )， 但 随后 就 会 发 现 离 不 开 它 了 。 为 了 
让 你 初步 感受 一 下 ， 这 里 提供 上 述 代 码 的 ISX 版 本 : 



































ReactDOM. render( 
<h1 id="my-heading"> 
<span><em>Hell</em>0</span> world! 
</h1>， 
document .getELementById("app") 
); 


1.5 443% DOM 属性 


下 列 几 个 DOM 属性 比较 特殊 ， 需 要 引起 注意 : class, for 和 style, 





class 和 for 不 能 直接 在 JavaScript 中 使 用 ， 因 为 它们 都 是 JavaScript 中 的 关键 字 。 取 而 代 
之 的 属性 名 是 className 和 htmLFor 。 





// 反例 
// 属性 不 会 生效 
React.DOM.h1( 

{ 


class: "pretty", 
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for: "me", 
} 
"Hello world!" 
J; 


// 正确 例子 
// 属性 生效 
React.DOM.h1( 
{ 
className: "pretty", 
htmlFor: "me", 











} 


"Hello world!" 

); 
至 于 style 属性 ， 你 不 能 像 以 往 在 HTML 中 那样 使 用 字符 串 对 其 赋值 ， 而 需要 使 用 
JavaScript 对 象 取而代之 。 通 过 避免 使 用 字符 串 的 方式 ， 可 以 减少 跨 站 脚本 (cross-site 
scripting, XSS) 攻击 的 威胁 ， 因 此 这 是 一 个 广 受 欢迎 的 变化 。 


























// 反例 
// 属性 不 会 生效 
React.DOM.h1( 








style: "background: black; color: white; font-family: Verdana", 
}, 
"Hello world!" 
)3 


// 正确 例子 
// 属性 生效 
React.DOM.h1( 








{ 
style: { 
background: "black", 
color: "white", 
fontFamily: "Verdana", 
} 
}, 


"Hello world!" 
J; 


此 外 ， 在 处 理 CSS 属性 时 ， 还 要 注意 使 用 JavaScript API 的 属性 名 。 换 名 话说 ， 就 是 使 用 
fontFamily 代替 font-family, 


























1.6 React DevTools 浏览 器 扩展 


如 果 你 在 尝试 本 章 前 面 的 例子 时 ， 打 开 过 浏览 器 控制 台 ， 你 会 看 到 一 条 提示 信息 
“Download the React DevTools for a better development experience: https://fb.me/react- 
devtools”。 这 个 URL 是 通 往 浏览 器 扩展 安装 页 的 链接 ， 该 扩展 可 以 帮助 你 调试 React 应 用 
(如 图 1-6 所 示 )。 
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R OD | Elements Console Sources Network Timeline Profiles Resources Security Audits React Bs 


| O trace react updates <Button> ($r in the console) 
WELLUIIE LU mancpaul Props: read-only 
</div> i aiam 
y <Whinepad> children: "+ add 
v <div className="Whinepad"> className: "WhinepadToolbarAddButton" 
» <div className="WhinepadTootbar''> ponClick: bound _addNewDialog() 


+ <div className="WhinepadToolbarAdd"> 
> Button onClick=bound _addNewDialog() className="WhinepadToo lba 
</div> 
+ <div className="WhinepadToolbarSearch"> 
<input placeholder="Search 4 records..." onChange=bound search( 
</div> 
</div> 
y <div className="WhinepadDatagrid"> 
y <Excel> 
v <div className="Excel"> 
+ <table> 


div Whinepad div div div ESI 


Search by Component Name 











B 1-6: 浏览 器 扩展 程序 React DevTools 


虽然 这 个 浏览 器 扩展 在 开始 阶段 可 能 派 不 上 用 场 ， 但 到 了 第 4 章 你 就 会 发 现 它 的 意义 所 在 。 


1.7 下 一 步 : 自 定义 组 件 
至 此 ， 你 已 经 完成 了 Hello World 应 用 的 骨架 。 现 在 你 知道 如 何 : 


。 安装 、 设 置 并 使 用 React Æ (仅仅 需要 引入 两 个 <script> 标签 ) ; 

。 «te E AY DOM Y FR HE ye Be — 4 React 2H ft (比如 ReactDOM.render(reactNhat， 
domWhere)) ; 

。 使 用 内 建 组 件 ， 即 那些 常规 DOM TCS Yb SER (比如 React.DOM.div(attributes, 
children)), 











js 





然而 ，React 真正 的 力量 要 在 你 开始 使 用 自 定义 组 件 构建 (并 更 新 ) 应 用 界面 后 才能 体现 
出 来 。 下 一 章 ， 我 们 将 学 习 组 件 的 具体 操作 。 
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第 2 章 


组 件 的 生命 周期 








现在 你 已 经 知道 如 何 使 用 预定 义 的 DOM 组 件 ， 是 时 候 学 习 如 何 建立 自己 的 组 件 了 。 


2.1 基础 


创建 新 组 件 的 API 如 下 : 





var MyComponent = React.createClass({ 
/* 组 件 详 细 说 明 */ 
]); 


在 上 述 例 子 中 ,“ 组 件 详细 说 明 ” 是 一 个 JavaScript 对 象 ， 该 对 象 需要 包含 一 个 名 为 
render() 的 方法 以 及 一 系列 可 选 的 方法 与 属性 。 一 个 基本 的 例子 大 概 如 下 所 示 : 


var Component = React.createClass({ 
render: function() { 
return React.DOM.span(null, "I'm so custom"); 
} 
}); 








如 你 所 见 ， 唯 一 必须 要 做 的 事情 就 是 实现 render() 方法 。 该 方法 必须 返回 一 个 React 组 
件 ， 不 能 只 返回 文本 内 容 。 这 也 是 上 述 代 码 片段 中 使 用 span 组 件 的 原因 。 




















在 应 用 中 ， 使 用 自 定 义 组 件 的 方法 和 使 用 DOM 组 件 的 方法 类 似 : 


ReactDOM.render( 

React.createELement(Component ) ， 
document .getELementById("app") 
); 


该 自 定义 组 件 的 泻 染 结果 如 图 2-1 所 示 。 











I'm so custom 





R 回 Elements Console Sources Network Timeline Profile: 


<html> 
> <head>..</head> 
v <body> 
v<div id="app"> 
</div> 
<script src="react/build/react.js"></script> 
<script src="react/build/react-dom. js"></script> 
v <script> 
var Component = React.createClass({ 
render: function() { 
return React.DOM.span(null, "I'm so custom"); 
} 
H; 
ReactDOM. render ( 
React.createElement (Component), 
document ,getELementById("app'") 





</ Script> 
</body> 
</html> 














图 2-1: 你 的 第 一 个 自 定 义 组 件 


React.createElement() 是 创建 组 件 “ 实 例 ” 的 方法 之 一 。 如 果 你 想 创建 多 个 实例 ， 还 有 另 
一 种 途径 ， 就 是 使 用 工厂 方法 : 


var ComponentFactory = React.createFactory(Component) ; 


ReactDOM. render ( 
ComponentFactory(), 
document.getElLementById("app") 


Js 


请 注意 ， 我 们 之 前 介绍 的 React.DOM.* 方法 实际 上 只 是 在 React.createElement() 的 基础 上 
进行 了 一 层 封 装 。 换 名 话说 ， 以 下 代码 同样 可 以 这 染 DOM 组 件 : 








ReactDOM.render( 
React.createElement("span", null, "Hello"), 
document.getElementById("app") 


)s 


如 你 所 见 ， 和 自 定义 组 件 使 用 JavaScript 函数 进行 定义 不 同 ，DOM 元 素 是 使 用 字符 串 定 
义 的 。 
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2.2 属性 


你 的 组 件 可 以 接收 属性 ， 并 根据 属性 值 进 行 相 对 应 的 演 染 或 表现 。 所 有 属性 都 可 以 通过 
this.props 对 象 获 取 。 让 我 们 看 看 下 面 这 个 例子 : 








var Component = React.createClass({ 
render: function() { 
return React.DOM.span(null, "My name is 
} 
}); 


在 演 染 组 件 时 ， 传 递 属性 的 方法 如 下 : 


+ this.props.name) ; 


ReactDOM. render ( 
React.createElement(Component, { 
Name: "Bob", 


}), 
document.getElLementById("app") 


j; 
结果 如 图 2-2 所 示 。 








My name is Bob 





ROI Elements Console Sources Network Timeline Profiles Resources 


<html> 
> <head>..</head> 
v <body> 
v<div id="app"> 
</div> 
<script src="react/build/react.js"></script> 
<script src="react/build/react-dom. js"></script> 
v <script> 
var Component = React.createClass({ 
render: function() { 
return React.DOM.span(null, "My name is " + this.props.name); 
} 
H; 
ReactDOM. render ( 
React.createElement (Component, { 
name: "Bob" 
})， 
document ,getELementById("app") 





</Script> 
</body> 
</html> 











2-2: 使 用 组 件 属性 











请 把 this.props 视 作 只 读 属 性 。 从 父 组 件 传递 配置 到 子 组 件 时 ， 属 性 非常 重 
要 。( 从 子 组 件 到 父 组 件 也 是 这 样 ， 你 会 在 本 书 的 随后 章节 中 了 解 .) 如 果 你 
想 为 this.props 设置 属性 ， 只 需要 使 用 额外 的 变量 或 者 组 件 详细 说 明 对 象 
的 属性 即 可 (比如 this.thing 对 应 于 this.props.thing)。 事 实 上 ， 在 支持 
ECMAScripts 的 浏览 器 中 ， 你 不 能 改变 this.props， 因 为 : 




















> Object.isFrozen(this.props) === true; // true 


2.3 propTypes 


在 你 的 组 件 中 ， 可 以 添加 一 个 名 为 propTypes 的 属性 ， 以 声明 组 件 需 要 接收 的 属性 列表 及 
其 对 应 类 型 。 下 面 是 一 个 例子 : 





var Component = React.createClass({ 
propTypes: { 
name: React.PropTypes.string.isRequired, 
}, 
render: function() { 
return React.DOM.span(null, "My name is " + this.props.name); 
} 
}); 


虽然 也 可 以 不 使 用 propTypes， 但 是 使 用 propTypes 有 以 下 两 方面 的 好 处 。 


。 通过 预先 声明 组 件 期 望 接收 的 参数 ， 让 使 用 组 件 的 用 户 不 需要 在 render() 方法 的 源 代 
码 中 到 处 寻找 该 组 件 可 配置 的 属性 〈 这 可 能 需要 花费 很 长 时 间 )。 

。 React 会 在 运行 时 验证 属性 值 的 有 效 性 。 这 使 得 你 可 以 放心 编写 render() 国 数 ， 而 不 需 
要 对 组 件 接收 的 数据 类 型 有 所 顾虑 (其 至 过 分 怀疑 )。 











让 我 们 看 看 其 验证 效果 。name: React.PropTypes.string.isRequired 清晰 地 指明 了 name 属 
性 是 一 个 必须 提供 的 字符 串 值 。 假 设 你 忘记 传递 这 个 值 ， 会 在 控制 台中 得 到 一 个 警告 信息 
(如 图 2-3 所 示 ) : 











ReactDOM. render( 
React.createElement(Component, { 
// name: "Bob", 


Pa 
document.getElementById("app") 


); 


如 果 你 提供 了 一 个 无 效 类 型 的 值 ， 当 然 也 会 得 到 警告 信息 。 比 如 提供 的 值 是 整数 类 型 〈 如 
图 2-4 所 示 ) : 








React.createElement(Component, { 
name: 123, 


}) 
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My name is undefined 








区 O Elements Console Sources Network Timeline Profiles Resources Audits React 
v <script> f 


var Component = React.createClass({ 
propTypes: { 


name: React.PropTypes.string.isRequired, 
} 
render: function() { 
return React.DOM.span(null, "My name is " + this.props.name) ; 
} 
H; 
ReactDOM. render ( 


React. createElement (Component, { 
// name: "Bob", 
// name: 123, 


document »getElementById ("app") 


Console Emulation Rendering 





© Y <top frame> v Preserve log 





Filter C Regex C) Hide network messages (A) Errors Warnings Info Logs Debug Handled 


© pWarning: Failed propType: Required prop `name` was not specified in `<<anonymous>> 
> 





图 2-3: 没有 提供 必需 的 属性 值 时 出 现 的 警告 信息 


My name is 123 








ROI Elements Console Sources Network Timeline Profiles Resources Audits React 
一 -一 一 一 
v <script> 





var Component = React.createClass({ 
propTypes: { 


name: React.PropTypes.string. isRequired, 
} 
render: function() { 
return React.DOM.span(null, "My name is " + this.props.name); 
} 
Hi 
ReactDOM. render ( 


React.createElement(Component, { 
// name: "Bob", 
name: 123, 


H, 
document. getELementById("app") 


Console Emulation Rendering 
© Y  <top frame> 


[Eiter Regex 





v Preserve log 


Hide network messages A) Errors Warnings Info Logs Debug Handled 





© >Warning: Failed propType: Invalid prop ‘name’ of type `number`ò supplied to `<<anonymous>>`, expected `string`. 
> 





图 2-4: 提供 了 无 效 类 型 的 属性 值 时 出 现 的 警告 信息 


口 / 











图 2-5 列 出 了 PropTypes 的 可 用 属性 列表 ， 用 于 根据 具体 需求 进行 选用 。 











| Console | Search Emulation Rendering 





© Y <top frame> v (Preserve log 


> Object.keys(React.PropTypes).join('\n') 
"array 
bool 
func 
number 
object 
string 
any 
arrayOf 
element 
instanceOf 
node 
objectOf 
oneOf 
oneOfType 
shape" 


> | 











2-5: 所 有 的 React.PropTypes 可 用 属性 


在 组 件 中 声明 propTypes 是 可 选 的 ， 这 也 意味 着 你 可 以 在 这 里 选择 列 出 部 分 
而 非 所 有 属性 。 或 许 你 会 觉得 不 声明 所 有 属性 是 一 个 坏 主意 ， 但 要 牢记 一 
点 ， 这 种 情况 在 调试 他 人 代码 时 是 有 可 能 遇 到 的 。 














默认 属性 值 
当 你 的 组 件 接收 可 选 参数 时 ， 你 需要 特别 小 心 没有 提供 这 些 属性 的 情况 ， 以 确保 组 件 在 这 
些 情况 下 正常 运行 。 这 难免 会 导致 一 些 防御 性 的 样板 代码 产生 ， 比 如 : 








wt 


var text = 'text' in this.props ? this.props.text : ; 


可 以 通过 实现 getDefaultProps() 方法 ， 避 免 这 种 代码 的 产生 〈 并 把 关注 点 放 在 更 重要 的 
地 方 ) : 





var Component = React.createClass({ 
propTypes: { 
firstName: React.PropTypes.string.isRequired, 
middleName: React.PropTypes.string, 
familyName: React.PropTypes.string.isRequired, 
address: React.PropTypes.string, 


}, 


getDefaultProps: function() { 
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return { 
middleName: '' 
address: 'n/a', 
J}; 
hs 


render: function() {/* ... */} 
}); 


如 你 所 见 ，getDefaultProps() 方法 返回 一 个 对 象 ， 并 为 每 个 可 选 属性 (不 带 .isRequired 
的 属性 ) 提供 了 默认 值 。 


2.4 state 


到 目前 为 止 ， 我 们 的 例子 都 是 纯 静态 的 (或 者 说 是 “无 状态 ”的 )， 旨 在 给 你 一 种 使 用 组 
件 块 组 合 界面 的 思路 。 不 过 React 真正 的 内 光 点 出 现在 应 用 数据 发 生 改变 的 时 候 (也 是 传 
统 的 浏览 器 DOM 操作 和 维护 变 得 复杂 的 地 方 )。React 有 一 个 称 为 state 的 概念 ， 也 就 是 组 
件 渲染 自身 时 用 到 的 数据 。 当 state 发 生 改 变 时 ，React 会 自动 重建 用 户 界面 。 因 此 ， 当 你 
(在 render() 方法 中 ) 初始 化 构造 界面 后 ， 只 需要 关心 数据 的 变化 即 可 。 你 完全 不 需要 再 
关心 界面 变化 了 。 毕 竞 ， 你 的 render() 方法 已 经 提供 了 组 件 的 蓝图 。 



















































































调用 setState() 后 的 界面 更 新 是 通过 一 个 队列 机 制 高 效 地 进行 批量 修改 的 ， 
直接 改变 this.state 会 导致 意外 行为 的 发 生 ， 因 此 你 不 应 该 这 么 做 。 和 前 
面 的 this.props 类 似 ， 可 以 把 this.state 当 作 只 读 属 性 ， 否则， 不 仅仅 在 
语义 上 不 够 直观 ， 还 会 导致 不 可 预料 的 结果 。 类 似 地 ， 永 远 不 要 自行 调用 
this.render() 方法 一 一 而 是 将 其 留 给 React 进行 批 处 理 ， 计 算 最 小 的 变化 数 
量 ， 并 在 合适 的 时 机 调用 render()。 























和 this.props 的 取 值 方式 类 似 ， 你 可 以 通过 this.state 对 象 取得 state。 在 更 新 state 
时 ， 可 以 使 用 this.setState() 方法 。 当 this.setState() 被 调用 时 ，React 会 调用 你 的 
render() 方法 并 更 新 界面 。 








当 setState() 被 调用 时 ，React 会 更 新 界面 。 这 是 最 为 常见 的 情形 ， 但 
你 在 随后 的 学 习 中 会 了 解 到 一 种 例外 情况 。 可 以 通过 令 一 个 名 为 
shouldComponentUpdate() 的 特殊 “生命 周期 ”方法 返回 false， 从 而 避免 界 
面 更 新 。 




















2.5 市 状态 的 文本 框 组件 


下 面 来 构建 一 个 新 组 件 。 这 是 一 个 可 以 记录 已 输入 字符 数 的 文本 框 组 件 (如 图 2-6 所 示 )。 
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图 2-6: 自 定义 文本 框 组 件 的 最 终 效果 
你 (和 其 他 使 用 这 个 可 重用 组 件 的 人 ) 可 以 这 样 使 用 这 个 新 组 件 : 





ReactDOM. render( 
React.createElement(TextAreaCounter, { 


text: "Bob", 


lon 
document.getElementById( "app" ) 


); 
现在 让 我 们 一 起 实现 这 个 组 件 。 我 们 可 以 先 创 建 一 个 类 似 于 上 述 例 子 的 “无 状态 ”版 本 ， 
暂 不 处 理 状态 的 更 新 : 














var TextAreaCounter = React.createClass({ 


propTypes: { 
text: React.PropTypes.string, 


}， 
getDefaultProps: function() { 
return { 
text: '', 
}; 
}， 


render: function() { 
return React.DOM.div(null, 
React.DOM. textarea({ 
defaultValue: this.props.text, 
ps 
React.DOM.h3(null, this.props.text.length) 
) ; 
} 
H3 


在 上 述 例子 中 ， 你 可 能 注意 到 文本 框 使 用 了 defaultValue 属性 ， 而 不 是 你 在 
常规 HTML 中 习惯 使 用 的 文本 子 元 素 。 这 是 因为 React 和 传统 HTML 在 处 
理 表单 上 有 一 些 细 微 的 区 别 。 我 们 会 在 第 4 章 讨论 这 一 点 ， 不 过 请 放心 ， 二 

AN 


者 之 间 没 有 太 多 区 别 。 此 外 ， 你 将 会 发 现 这 些 不 同 之 处 的 存在 是 合理 的 ， 会 
让 你 的 开发 体验 更 加 愉悦 。 
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如 你 所 见 ， 这 个 组 件 接收 一 个 可 选 字符 串 属性 text， 并 使 用 给 定 的 属性 值 泻 染 一 个 文本 框 
组 件 ， 以 及 一 个 简单 显示 字符 串 长 度 的 <h3> 组 件 。 
































R 0 Elements Console Sources Network Timeline Profiles 
v Suuuy> 
v<div id="app"> 
| <div data-reactid=".0"> 
| <h3 data-reactid=".0.1">3</h3> 
</div> 
</div> 
<script src="react/build/react.js"></script> 
<script src="react/build/react-dom. js"></script> 
ve<script> 
var TextAreaCounter = React.createClass({ 





propTypes: { 
text: React.PropTypes.string, 


render: function() { 
return React.DOM.div(null, 
React.DOM. textarea({ 
defaultValue: this.props.text, 


H, 
React.DOM.h3(null, this.props.text. length) 
); 


} 
H; 
ReactDOM. render ( 
React. DR ee encounters { 
text: "Bob" 


H, 
document.getElementById("app") 
); 











2-7: 目前 的 TextAreaCounter 组 件 


a ln dln ek 换 名 话说， 我 们 要 让 组 件 维护 某 些 数据 (state). 
这 些 数据 在 初始 化 泻 染 时 需要 用 到 ， 并 且 在 数据 随后 发 生 改 变 时 进行 更 新 CTL). 





在 你 的 组 件 中 实现 一 个 getInitialstate() 方法 ， 以 保证 总 是 可 以 合法 地 取得 数据 。 


getInitialState: function() { 
return { 
text: this.props.text, 


}; 

}, 

个 组 件 仅仅 需要 维护 textarea 组 件 中 的 文本 数据 ， 因 此 state 只 包含 一 个 属性 text, 1% 
eres this.state.text 访问 。 在 初始 化 时 ( 即 getInitialstate() 国 数 执行 时 )， 
仅仅 是 把 text 属性 复制 过 来 。 随 后 在 数据 发 生 改 变 时 ( 即 用 户 在 文本 框 中 输入 内 容 时 )， 
组 件 可 以 通过 一 个 辅助 方法 更 新 state: 























_textChange: function(ev) { 
this.setState({ 
text: ev.target.value, 
})3 
Fs 





改变 state 必须 使 用 this.setState() 方法 。 该 方法 接收 一 个 对 象 参数 ， 并 把 对 象 与 this. 
state 中 已 存在 的 数据 进行 合并 。 或 许 你 已 经 猜 到 ，_textChange() 就 是 一 个 事件 监听 器 ， 











可 以 接收 一 个 事件 对 象 ev 并 通过 该 参数 取得 文本 框 的 内 容 。 





最 后 要 做 的 就 是 在 render() 方法 中 使 用 this.state 代替 this.props， 并 设置 事件 监听 器 : 


render: function() { 
return React.DOM.div(null, 
React.DOM. textarea({ 
value: this.state.text, 
onChange: this._textChange, 
p), 
React.DOM.h3(null, this.state.text.length) 
); 
} 





现在 无 论 用 户 何 时 在 文本 框 中 输入 数据 ， 计 数 器 的 值 都 会 自动 反映 字符 长 度 的 变化 (A 





2-8 所 示 )。 


0 图 





| 











Bob，Sponge Bob 
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民 D Elements Console Sources Network Timeline Profile: 
v <script> 
var TextAreaCounter = React.createClass({ 


propTypes: { 
text: React.PropTypes.string, 
i, 


getInitialState: function() { 
return { 
text: this.props.text, 


}, 
_textChange: function(ev) { 


this. setState({ 
text: ev.target.value, 


i, 


render: function() { 
return React.DOM.div(null, 
React.DOM. textarea({ 
value: this.state.text, 
onChange: this._textChange, 


}) 
React. DOM. h3(null, this.state.text. length) 
) 
} 
H; 
ReactDOM. render ( 


React.createElement(TextAreaCounter, { 
text: "Bob", 











2-8: 在 文本 框 中 输入 内 容 


2.6 关于 DOM 事件 的 说 明 


为 了 避免 混淆 ， 关 于 以 下 这 行 代 码 有 几 点 需要 说 明 : 





组 件 的 生命 周期 





onChange: this._textChange 





HHP PERE. (ETEPES ALPE GE, React 使 用 了 自身 的 合成 事件 系统 。 为 了 帮助 你 理解 为 
什么 这 样 做 ， 我 们 先 来 看 看 在 原始 DOM 世界 里 是 怎么 实现 事件 处 理 的 。 











2.6.1 传统 的 事件 处 理 
使 用 内 联 事件 处 理 器 是 非常 方便 的 ， 就 像 这样 ， 





<button onclick="doStuff"> 


pate 
SE 








‘a 

















这 样 做 很 方便 也 易于 阅读 (事件 处 理 和 界面 代码 放 在 一 起 )， 但 是 当 很 多 事件 处 理 函 
数 像 这 样 散落 在 界面 代码 各 处 时 ， 就 显得 效率 低下 了 。 而 且 在 同一 个 按钮 中 设置 多 个 事件 


监听 器 也 很 困难 ， 特 别 是 当 按钮 位 于 其 他 人 的 “组 件 ” 中 时 ， 你 是 不 会 愿意 到 他 们 的 代码 
中 修改 源 代 码 的 。 这 就 是 在 DOM 世界 中 ， 人 们 使 用 element.addEventListener (这 样 会 
导致 代码 分 散 到 两 个 甚至 多 个 地 方 ) 和 事件 委托 〈 为 了 解决 性 能 问题 ) 设置 事件 监听 的 原 
因 。 事 件 委托 意味 着 你 可 以 在 某 个 父 布 点 监听 事件 。 比 如 当 一 个 <div> 包含 许多 按钮 时 ， 

















只 需要 为 所 有 按钮 设置 一 个 监听 器 即 可 。 





使 用 事件 委托 的 代码 如 下 所 示 : 


<div id="parent"> 

<button id="ok">0K</button> 

<button id="cancel">Cancel</button> 
</div> 


<script> 





document.getElementById('parent').addEventListener('click', function(event) { 


var button = event.target; 

















// 根据 具体 点 击 的 按钮 进行 不 同 操作 
switch (button.id) { 
case ‘ok': 
console. log('OK!'); 
break; 
case 'cancel': 
console. log('Cancel' ); 
break; 
default: 
new Error('Unexpected button ID'); 
}; 
J); 


</script> 
尽管 方法 奏效 ， 性 能 也 不 错 ， 但 是 它 仍 有 一 些 缺 点 。 
。 监听 器 的 声明 代码 远离 视图 组 件 ， 使 得 代码 难以 搜索 与 调试 。 














。 使 用 委托 总 要 经 过 switch 结构 ， 在 你 开始 进行 实际 逻辑 编写 之 前 ， 需 要 创建 不 必要 的 
样板 代码 。 
。 实际 中 为 处 理 浏 览 器 的 不 一 致 性 (上 述 代 码 中 省 略 了 这 一 步 又 ) ,会 让 代码 变 得 更 加 宛 长 。 


不 幸 的 是 ， 在 你 打算 把 这 段 代 码 放 到 真实 环境 给 用 户 使 用 之 前 ， 还 需要 做 更 多 工作 ， 以 支 
持 所 有 主流 浏览 器 。 








。 除了 addEventListener 之 外 还 需要 attachEvent。 
。 要 在 监听 器 顶部 使 用 event = event || window.event;。 
。 需要 使 用 var button = event.target || event.srcElement;, 





尽管 以 上 所 有 都 是 必需 的 ， 但 是 非常 邻 人 厌烦， 因此 你 最 终 可 能 会 选用 某 种 类 型 的 事件 库 
作为 代替 。 然 而 ，React 自 带 一 套 解 决 方案 来 帮助 你 摆脱 事件 处 理 的 虐 梦 ， 为 什么 还 要 添 
加 另 一 个 库 (并 学 习 更 多 的 API) 呢 ? 









































2.6.2 React 的 事件 处 理 

为 了 包 囊 并 规范 浏览 器 事件 ，React 使 用 了 合成 事件 来 消除 浏览 器 之 间 的 不 一 致 情况 。 有 
T React 的 帮助 ， 现 在 你 可 以 依靠 event.target 在 所 有 浏览 器 中 取得 想 要 的 值 了 。 这 就 是 
在 TextAreaCounter 代码 片段 中 ， 你 只 需要 使 用 ev.target.value 就 可 以 正常 工作 的 原因 。 
与 此 同时 ， 取 消 事 件 的 API 在 所 有 浏览 器 中 都 通用 了 ;event.stopPropagation() FH event. 
preventDefault() 甚至 在 老 版 本 IE 浏览 器 中 也 可 以 生效 。 


这 种 语法 轻松 地 把 视图 和 事件 监听 绑 定 在 一 起 。 虽 然 其 语法 看 起 来 就 像 传统 的 内 联 事件 处 
理 器 一 样 ， 但 背后 的 实现 原理 并 非 如 此 。 事 实 上 ，React 基于 性 能 考虑 ， 使 用 了 事件 委托 。 


此 外 ，React 在 事件 处 理 中 使 用 驼峰 法 命名 ， 因 此 你 需要 使 用 onClick 代替 onclick, 


如 有 果 你 出 于 某 种 原因 需要 使 用 原生 的 浏览 器 事件 ， 可 以 使 用 event.nativeEvent， 但 估计 你 
不 太 可 能 会 用 得 上 。 


























还 有 一 件 事情 需要 注意 。onChange 事件 (在 文本 框 例子 中 已 经 用 到 ) 的 行为 和 你 预期 中 是 
一 样 的 ， 当 用 户 输 入 时 触发 ， 而 不 是 像 原生 DOM 事件 那样 ， 在 用 户 结束 输入 并 把 焦点 从 
输入 框 移 走时 才 触 发 。 














2.7 props 与 state 


现在 你 知道 ， 当 你 需要 在 render() 方法 中 显示 组 件 时 ， 可 以 访问 this.props 和 this. 
state 了 。 或 许 你 会 有 疑问 ， 两 者 应 分 别 在 何 时 使 用 呢 ? 


属性 是 一 种 给 外 部 世界 设置 组 件 的 机 制 ， 而 状态 则 负责 组 件 内 部 数据 的 维护 。 因 此 ， 如 








组 件 的 生命 周期 | 21 





果 与 面向 对 象 编程 进行 类 比 的 话 ，this.props 就 像 是 传递 给 类 构造 函数 的 参数 ， 而 this. 
state 则 包含 了 你 的 私有 属性 。 


2.8 在 初始 化 state 时 使 用 props: 一 种 反 模 式 


在 前 面 的 一 个 例子 中 ， 我 们 在 getInitialState() 方法 中 使 用 了 this.props; 





getInitialState: function() { 
return { 
text: this.props.text, 
J; 
}, 

通常 认为 这 种 做 法 是 反 模 式 。 理 想 情况 下 ， 你 可 以 在 render() 方法 中 将 this.state 和 
this.props 任意 组 合 ， 以 进行 界面 构建 。 但 有 时候， 你 想 要 传递 一 个 值 到 组 件 中 ， 用 于 构 
造 初始 状态 。 这 种 想法 本 身 没什么 不 对 ， 但 如 果 组 件 的 调用 者 以 为 属性 (在 之 前 的 例子 中 
是 text 属性 ) 总 是 能 保持 最 新 ， 这 种 写法 就 有 歧义 了 。 为 了 符合 语 境 ， 对 命名 作 一 点 小 改 
动 就 足够 了 。 比 如 ， 把 属性 名 text 改 成 defaultText 或 者 initialValue: 



































propTypes: { 
defaultValue: React.PropTypes.string 


} 


getInitialState: function() { 
return { 

text: this.props.defaultValue, 

J; 

} 


第 4 章 将 说 明 React 如 何 实现 自己 的 input 和 textarea 来 解决 这 个 问题 。 这 
和 人 们 之 前 所 了 解 的 HTML 知识 有 一 些 出 入 。 





2.9 从 外 部 访问 组 件 


在 实际 中 ， 你 不 会 总 是 从 零 开 始 构建 一 个 React 应 用 。 有 时 候 ， 你 可 能 需要 将 一 个 现 有 的 
应 用 或 网 站 逐步 迁移 到 React。 幸 运 的 是 ，React 的 设计 允许 它 和 其 他 任何 已 存在 的 代码 共 
To "ERE, React 的 原作 者 也 并 没有 从 头 完全 用 React 对 一 整个 超大 型 应 用 (Facebook) 进 
行 重 构 。 


让 你 的 React 应 用 和 外 界 进行 通信 的 一 种 方法 ， 是 在 使 用 ReactDOM.render() 方法 进行 泻 染 
时 ， 把 引用 赋值 给 一 个 变量 ， 然 后 在 外 部 通过 该 变量 访问 组 件 : 
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var myTextAreaCounter = ReactDOM.render( 
React.createElement(TextAreaCounter, { 
defaultValue: "Bob", 
}), 
document.getElementById("app") 


) ; 


现在 你 可 以 通过 myTextAreaCounter 访问 组 件 的 方法 和 属性 ， 就 像 在 组 件 内 部 使 用 this 访 











问 一 样 。 你 其 至 可 以 在 JavaScript 控制 台中 操控 这 个 组 件 (如 图 2-9 所 示 )。 











Hello outside world! 
4 
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R 0 Elements Console Sources Network Timeline Profiles 





© Y <top frame> v Preserve log 
Filter ~] Regex [Hide network messages D Errors 


myTextAreaCounter.setState({text: "Hello outside world!"}); 
undefined 
var reactAppNode = ReactDOM. findDOMNode(myTextAreaCounter) ; 
undefined 


~ 


{v 


{v 


reactAppNode; 


> <div data-reactid=". 0"> 
"</div> 


reactAppNode.parentNode === document.getElementById('app'); 
true 


v 


~ 


myTextAreaCounter. props; 

Object {defaultValue: "Bob"} 
myTextAreaCounter. state; 

Object {text: "Hello outside world!"} 
>| 


~ 











2-9: 通过 引用 访问 已 泻 染 的 组 件 
以 下 这 行 代码 设置 了 新 的 state 值 : 


myTextAreaCounter.setState({text: "Hello outside world!"}); 





以 下 这 行 代码 获取 了 React 创建 的 父 元 素 DOM 节点 的 引用 : 
var reactAppNode = ReactDOM.findDOMNode(myTextAreaCounter); 


获取 DOM 结构 中 首 个 <div id="app"> 节点 。 这 也 是 你 让 React 进行 浑 染 的 位 置 : 





reactAppNode.parentNode === document.getElementById('app'); // true 


通过 以 下 方法 可 以 访问 组 件 的 属性 和 状态 : 





myTextAreaCounter.props; // Object { defaultValue: "Bob"} 
myTextAreaCounter.state; // Object { text: "Hello outside world!"} 
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现在 你 已 经 有 权限 从 组 件 外 部 访问 整个 组 件 的 API。 尽 管 如 此 ， 你 还 是 应 当 
谨慎 使 用 这 种 超 能 力 。 也 许 当 你 需要 获取 节点 的 尺寸 并 确保 其 适 配 整 个 页 面 
时 ， 可 以 使 用 ReactDOM.findDOMNode()， 但 这 种 情况 确实 出 现 得 不 多 。 即 便 
你 认为 这 样 可 以 方便 地 修改 那些 不 属于 你 的 组 件 的 state， 可 这 样 做 违背 
React 的 初 袁 。 假 若 组 件 并 不 能 预料 到 外 部 的 这 些 干扰 ， 可 能 还 会 导致 pug 
的 产生 。 比 如 以 下 的 代码 虽然 可 以 生效 ， 但 不 推荐 你 这 样 做 : 

// 反例 

myTextAreaCounter.setState({text: 'NO000'}); 

















2.10 中途 改 变 属性 


正如 你 已 经 知道 的 ， 属 性 是 配置 组 件 的 一 种 方式 。 因 此 在 组 件 创建 完成 后 ， 从 外 部 改变 组 
件 的 属性 也 是 合理 的 。 但 你 的 组 件 应 当 作 好 应 对 这 种 场景 的 准备 。 

















如 果 你 回去 看 看 之 前 例子 中 的 render() 方法 ， 会 发 现 我 们 在 该 方法 中 只 用 到 了 this. 


state; 


render: function() { 
return React.DOM.div(null, 
React.DOM. textarea({ 
value: this.state.text, 
onChange: this._textChange, 


React.DOM.h3(null, this.state.text. length) 
); 
} 


如 果 你 从 外 部 改变 了 组 件 属性 ， 不 会 对 泻 染 产生 影响 。 换 句 话 说 ， 当 你 进行 如 下 操作 时 ， 
文本 框 中 的 内 容 不 会 发 生变 化 : 





myTextAreaCounter = ReactDOM.render( 

React.createElement(TextAreaCounter, { 
defaultValue: "Hello", // 之 前 的 值 为 字符 串 "Bob" 

Ps 

document.getElementById("app") 

); 


尽管 myTextAreaCounter 会 在 ReactDOM.render() 重新 调用 时 被 覆盖 ， 但 是 应 
用 的 原 有 状态 依然 会 保留 。React 会 在 应 用 改变 前 后 作出 协调 (reconciliation) , 
不 会 消除 之 前 的 数据 。 相 反 ，React 仅 作 出 最 小 限度 的 修改 。 





























现在 this.props 的 内 容 发 生 了 变化 (但 界面 没有 变化 ) : 


myTextAreaCounter.props; // 对 象 {defaultValue="Hello"} 
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设置 state 确实 会 更 新 界面 : 


// 反例 
myTextAreaCounter.setState({text: 'Hello'}); 


但 这 种 做 法 是 不 好 的 ， 因 为 这 在 更 复杂 的 组 件 中 可 能 会 导致 不 一 致 的 状态 ; 
比如 打 乱 内 部 计数 器 、 布 尔 型 标记 、 事 件 监听 器 等 。 








如 果 你 希望 优雅 地 处 理 外 部 入 侵 ( 即 属性 改变 ) ， 可 以 通过 componentwWillReceiveProps() 
方法 实现 : 
componentWillReceiveprops: function(newProps) { 
this.setState({ 
text: newProps.defaultVaLue, 
}); 
}, 
如 你 所 见 ， 这 个 方法 会 接收 新 属性 对 象 ， 让 你 可 以 根据 新 属性 设置 state。 此 外 ， 还 可 以 进 
行 其 他 工作 以 确保 组 件 状 态 保持 正常 。 


2.11 生命 周期 方法 


上 述 代 码 片 段 用 到 的 componentWillReceiveProps() 方法 是 React 提供 的 所 谓 生命 周 期 方法 
之 一 。 你 可 以 使 用 生命 周期 方法 监听 组 件 的 改变 。 除 此 之 外 ， 你 可 以 实现 的 其 他 生命 周期 
方法 还 包括 以 下 几 个 。 














e componentWillUpdate() 
当 你 的 组 件 再 次 泻 染 时 ， 在 render() 方法 前 调用 (在 组 件 的 props 或 者 state 发 生 改变 
时 会 触发 该 方法 )。 























e componentDidUpdate() 
在 render() 函数 执行 完毕 ， 且 更 新 的 组 件 已 被 同步 到 DOM 后 立即 调用 。 该 方法 不 会 
在 初始 化 演 染 时 触发 。 

e componentWillMount() 


在 新 节点 插入 DOM 结构 之 前 触发 。 


e componentDidMount() 


在 新 节点 插入 DOM 结构 之 后 触发 。 


e componentWillUnmount() 


在 组 件 从 DOM 中 移 除 时 立刻 触发 。 
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e shouldComponentUpdate(newProps, newState) 
这 个 方法 在 componentwWillupdate() 之 前 触发 ， 给 你 一 个 机 会 返回 false 以 取消 更 新 组 
件 ， 这 意味 着 render() 方法 将 不 会 被 调用 。 这 在 性 能 关键 型 的 应 用 场景 中 非常 有 用 。 
当 你 认为 变更 的 内 容 没 什么 特别 或 者 没有 重新 泻 染 的 需要 时 ， 可 以 实现 该 方法 。 要 决定 
是 否 更 新 ， 只 需 比 较 newState 参数 和 目前 的 状态 this.state 的 区 别 ， 以 及 newProps 参 
数 和 目前 的 属性 this.props 的 区 别 。 当 然 ， 也 可 直接 认为 该 组 件 是 静态 的 而 无 需 更 新 。 
(随后 你 会 见 到 相关 例子 。) 


2.12 生命 周期 示例 : 输出 日 志 记录 

为 了 更 好 地 理解 组 件 的 生命 周期 ， 我 们 基于 TextAreaCounter 组 件 添加 一 些 日 志 记 录 。 我 
们 简单 地 实现 所 有 的 生命 周期 方法 ， 并 且 在 这 些 方法 被 调用 时 ， 输 出 其 自身 的 方法 名 和 参 
数 到 控制 台中 : 


























var TextAreaCounter = React.createClass({ 


_log: function(methodName, args) { 
console. lLog(methodName, args); 

} 

componentWillUpdate: function() { 
this._log('componentWillUpdate', arguments); 

componentDidUpdate: function() { 
this._log('componentDidUpdate', arguments); 

} 

componentWillMount: function() { 
this._log('componentWillMount', arguments); 

Jo 

componentDidMount: function() { 
this._log('componentDidMount', arguments); 

J 

componentWillUnmount: function() { 
this._log('componentWillUnmount', arguments); 


}, 


// 其 他 方法 ,包括 render() 等 


Fs 
2-10 显示 了 页 面 加 载 完 成 后 的 结果 。 





如 你 所 见 ， 有 两 个 方法 被 调用 了 ,但 是 没有 携带 任何 参数 。componentDidMount() 方 
法 是 两 者 中 较为 有 意思 的 一 个 。 如 果 需 要 ， 你 可 以 在 这 个 方法 中 通过 ReactDOM. 
findDOMNode(this) 方法 访问 刚 加 载 好 的 DOM 节点 ， 比 如 获取 组 件 元 素 的 尺寸 大 小 。 由 于 
此 时 组 件 已 经 演 染 ， 你 可 以 进行 各 种 初始 化 工作 。 
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Q Elements Network | Sources| Timeline Profiles Resources Audits Console React 
|So... i lifecyclel.html x | >I] | 


v © file:// 19 var TextAreaCounter = React.createClass({ 
了 回 Users/stoya 29 
ae d 21 _log: function(methodName, args) { 
>(Jreact/buil 22 console. log(methodName, args); 
<} lifecycle1! 23 

















a 






































, 

24 componentWillUpdate: function() {this._log('componentWillUpdate', arguments);}, 
25 componentDidUpdat function() {this._log('componentDidUpdate', arguments);}, 
26 componentWillMount: function() {this._log('componentWillMount', arguments);}, 
27 componentDidMount: function() {this._log('componentDidMount', arguments) ;}, 
28 componentWillUnmount: function() {this._log('componentWillUnmount', arguments) ;}, 
29 

2A. nronTunac: S$ 


{} Line 1, Column 1 
| Console | Search Emulation Rendering 
© Y <top frame> v Preserve log 


componentWillMount » [] 











componentDidMount p [] 








图 2-10: 加 载 组 件 


接 下 来 ,假如 你 在 文本 框 末 尾 多 输入 一 个 s， 使 文本 变 成 Bobs， 会 发 生 什 么 事情 呢 ? 
图 2-11 所 示 。) 


(如 











Bobs 








N 








Q Elements Network Sources Timeline Profiles Resources Audits | Console| React 





© YW <top frame> Y C Preserve log 
componentWillMount » [] 
componentDidMount » [] 


componentWillUpdate w /Object, Object, Object] 
v0: Object 
defaultValue: "Bob" 
> _proto_: Object 
v 1: Object 
text: "Bobs" 
> __proto_: Object 
> 2: Object 
> callee: function () {this._log('componentWillUpdate', arguments) ;} 
length: 3 
>» Symbol(Symbol. iterator): function ArrayValues() { [native code] } 
> __proto_: Object 
componentDidUpdate w [Object, Object, Object] 
v0: Object 
defaultValue: "Bob" 
»__proto_: Object 
yi: Object 
text 
> __proto_: Object 
>» 2: Object 
> callee: function () {this._log('componentDidUpdate', arguments) ;} 
length: 3 
» Symbol(Symbol.iterator): function ArrayValues() { [native code] } 
»__proto_: Object 














图 2-11: 更 新 组 件 











componentWillUpdate(nextProps, nextState) 方法 被 调用 了 ， 新 的 数据 将 会 被 用 于 重新 说 
染 组 件 。 第 一 个 参数 是 this.props 的 新 值 (在 这 个 例子 中 没有 发 生变 化 )。 第 二 个 参数 是 
this.state 的 新 值 。 第 三 个 参数 是 context， 目 前 我 们 并 不 关心 这 个 参数 。 你 可 以 通过 比 
较 参 数 (比如 newProps) 和 目前 的 值 this.props 来 决定 是 否 需 要 进行 操作 。 


在 componentWillUpdate() 方法 执行 后 ，componentDidUpdate(oLdProps， oldState) 方法 被 
调用 ， 它 接收 的 两 个 参数 分 别 是 原本 的 props 和 state。 这 个 方法 让 你 有 机 会 在 组 件 改变 
之 后 进行 操作 。 你 可 以 在 该 方法 中 执行 this.setState()， 但 你 在 componentNtLLUpdate() 
中 可 不 能 这 么 做 。 


假设 你 想 要 限制 文本 框 中 输入 的 字符 数 ， 应 该 在 用 户 输入 时 调用 的 事件 处 理 器 
_textChange() 中 进行 限制 。 但 如 果 有 人 (假设 是 个 比 你 更 天 真 的 年 轻 人 ) 试图 从 外 部 调 
用 setState() 方法 呢 ? (之 前 我 们 提 到 过 ， 这 是 一 种 不 好 的 做 法 。) 你 能 否 继续 维持 组 件 
的 正常 状态 呢 ? 答案 是 肯定 的 。 你 可 以 在 componentDidUpdate() 方法 中 验证 字符 长 度 是 否 
大 于 允许 值 ， 如 果 大 于 ， 就 把 state 恢复 到 之 前 的 状态 。 就 像 这 样 : 









































componentDidUpdate: function(oldProps, oldState) { 
if (this.state.text.length > 3) { 
this.replaceState(oldState) ; 
} 
}, 


虽然 这 有 点 杞 人 忧 天 ， 但 确实 是 一 种 可 行 的 方案 。 





注意 这 里 使 用 了 replaceState() ft # setState(), setState(obj) 会 把 属性 
和 当前 的 this.state 进行 合并 ， 而 replaceState() 则 会 完全 重 写 所 有 状态 。 








2.13 生命 周期 示例 : 使 用 mixin 


在 前 面 的 例子 中 ， 五 个 生命 周期 方法 中 的 四 个 已 经 被 日 志 记 录 下 来 。 当 子 组 件 从 父 组 件 中 
移 除 时 ， 最 能 体现 第 五 个 方法 componentWillUnmount() 的 作用 。 在 下 面 这 个 例子 中 ， 要 把 
父子 组 件 的 所 有 变化 都 记录 下 来 。 为 了 实现 代码 复 用 ， 接 下 来 引入 一 个 新 概念 : mixin, 


mixin 其 实 是 一 个 JavaScript 对 象 ， 包 含 一 系列 方法 和 属性 。mixin 不 能 独立 使 用 ， 需 要 包 
含 在 另 一 个 对 象 的 属性 中 。 在 这 个 日 志 例 子 中 ，mixin 可 以 写成 这 样 : 








var logMixin = { 
_log: function(methodName, args) { 
console. lLog(this.name + '::' + methodName, args); 
}, 
componentWillUpdate: function() { 
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this._log('componentWillUpdate', arguments); 
}, 


componentDidUpdate: function() { 
this._log('componentDidUpdate', arguments); 


}, 
componentWillMount: function() { 
this._log('componentWillMount', arguments); 


}, 
componentDidMount: function() { 
this._log('componentDidMount', arguments); 


componentWillUnmount: function() { 
this._log('componentWillUnmount', arguments); 


}, 
Js 


在 非 React 世界 中 ， 你 可 以 使 用 for-in 循环 ， 把 所 有 属性 复制 到 一 个 新 对 象 中 ， 并 通过 这 
种 方法 让 新 对 象 获得 mixin 的 所 有 功能 。 在 React 世界 中 ， 你 可 以 通过 mixins 属性 快速 实 


现 ， 就 像 这 样 : 














var MyComponent = React.createClass({ 


mixins: [obj1, obj2, obj3], 





// 其 他 所 有 方法 

F 
只 需要 把 一 个 JavaScript 对 象 数组 赋值 给 mixins 属性 ， 然 后 把 剩 下 的 工作 交 给 React。 把 
LogMixin 包含 到 组 件 中 的 方法 如 下 : 





var TextAreaCounter = React.createClass({ 
name: 'TextAreaCounter', 

mixins: [logMixin], 

// 其 他 所 有 方法 

F 


如 你 所 见 ， 这 个 代码 片段 还 添加 了 一 个 name 属性 ， 方 便 辩 认 调 用 者 。 








如 果 你 运行 这 个 包含 mixin 的 代码 例子 ， 可 以 看 到 其 日 志 输 出 (如 图 2-12 所 示 )。 
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|So... Go e Sh 4] lifecycle2.html x | >t] | 
v Ofile:// 18 var logMixin = { 
= 19 _log: function(methodName, args) { 
vO Users/stoya 29 console. log(this.name + '::' + methodName, args); 
>(Jreact/buil 21 ; 
Slr le2 22 componentWillUpdate: function() {this._log('componentWillUpdate', arguments);}, 
2 lifecycle 23 componentDidUpdate: function() {this._log('componentDidUpdate', | arguments);}, 
24 componentWillMount: function() {this._log('componentWillMount', arguments);}, 
25 componentDidMount: function() {this._log('componentDidMount', arguments) ;}, 
26 componentWillUnmount: function() {this._log('componentWilLUnmount', arguments);}, 
27 $ 
28 
29 var TextAreaCounter = React.createClass({ 
30 name: 'TextAreaCounter', 
31 mixins: [logMixin], 
32 





{} Line 1, Column 1 
| Console | Search Emulation Rendering 


© Y <topframe> v (Preserve log 








TextAreaCounter: :componentWillMount » [] 
TextAreaCounter: :componentDidMount » [] 
TextAreaCounter: :componentWillUpdate p [Object, Object, Object] 
TextAreaCounter::componentDidUpdate » [Object, Object, Object] 











2-12; 使 用 mixin 并 辨认 组 件 


2.14 生命 周期 示例 : 使 用 子 组 件 


现在 ， 你 已 经 知道 如 何 根据 需求 去 混合 和 肯 套 React 组 件 。 但 目前 为 止 ， 你 只 看 到 了 如 何 
在 render() 方法 中 使 用 React.DOM 组 件 (而 非 自 定义 组 件 )。 接 下 来 ， 我们 看 看 如 何 使 用 
一 个 简单 的 自 定义 组 件 作 为 子 组 件 。 


首先 ， 你 可 以 把 计数 器 部 分 从 组 件 中 分 离 出 来 ， 作 为 一 个 单独 的 新 组 件 : 

















var Counter = React.createCLass({ 
name: 'Counter', 
mixins: [logMixin], 
propTypes: { 
count: React.PropTypes.number.isRequired, 
J 
render: function() { 
return React.DOM.span(null, this.props.count); 
} 
]); 


这 个 组 件 仅仅 包含 了 计数 器 的 部 分 : 它 泻 染 一 个 <span> 标签 ， 没 有 维护 任何 state， 仅 负 


责 显示 父 组件 提 供 的 count 属性 。 此 外 ， 该 组 件 混 合 使 用 了 LogMixin， 会 在 生命 周期 方法 
被 调用 时 输出 日 志 记 录 。 














现在 修改 父 组 件 TextAreaCounter 中 的 render() Wye, AAEM ERE VE Hh ya Counter 
组 件 ， 如 果 计 数 为 0， 则 不 显示 数字 : 


render: function() { 
var counter = null; 
if (this.state.text.length > 0) { 
counter = React.DOM.h3(null, 
React.createElement(Counter, { 
count: this.state.text. length, 
}) 
); 
} 
return React.DOM.div(null, 
React.DOM. textarea({ 
value: this.state.text, 
onChange: this._textChange, 
}), 
counter 
); 
} 


当 文 本 区 域 为 空 时 ，counter 变量 的 值 为 nuLL。 当 文本 框 里 包含 文本 时 ，counter 变量 则 包 
含 了 负责 显示 字符 数量 的 那 部 分 界面 。 没 有 必要 在 主 组 件 React.DOM.div 中 内 联 包 含 整个 
界面 的 所 有 参数 。 你 可 以 把 界面 细 分 为 各 种 小 变量 ， 并 选择 性 地 使 用 这 些 变量 。 


现在 你 可 以 观察 到 ， 两 个 组 件 的 生命 周期 方法 都 会 被 记录 下 来 。 图 2-13 显示 了 从 页 面 加 载 
到 改变 文本 框 内 容 时 发 生 了 什么 。 
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TextAreaCounter: :componentWillMount » [] 

Counter: :componentWilMount p [] 

Counter: :componentDidMount p [] 

TextAreaCounter: :componentDidMount p [] 

// let's type an "s" 

undefined 

TextAreaCounter: :componentWillUpdate » [Object, Object, Object] 
Counter: :componentWillUpdate p [Object, null, Object] 

Counter: :componentDidUpdate » [Object, null, Object] 
TextAreaCounter: :componentDidUpdate p [Object, Object, Object] 


v 


>| 








图 2-13: 装载 并 更 新 两 个 组 件 
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现在 你 知道 了 子 组 件 是 如 何在 父 组 件 之 前 装载 并 更 新 的 。 


2-14 显示 了 在 删除 文本 框 区 域 的 内 容 后 ， 计 数值 变 为 0 时 的 情况 。 在 这 种 情况 下 ， 
Counter 子 节点 会 变 为 null， 然 后 通过 componentWillUnmount 回调 函数 通知 你 ， 随 后 从 
DOM 树 中 移 除 原 有 节点 。 
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© Y  <top frame> v (Preserve log 
TextAreaCounter: :componentWillMount » [] 
Counter: :componentWil Mount » [] 
Counter: :componentDidMount » [] 
TextAreaCounter: :componentDidMount » [] 


v 


// let's type an "s" 

undefined 

TextAreaCounter: :componentWillUpdate » [Object, Object, Object] 
Counter: :componentWillUpdate p [Object, null, Object] 
Counter::componentDidUpdate » [Object, null, Object] 
TextAreaCounter: :componentDidUpdate » [Object, Object, Object] 
// select and delete all the text 

undefined 

TextAreaCounter: :componentWillUpdate » [Object, Object, Object] 


v 


Counter: :componentWillUnmount p [] 
TextAreaCounter: :componentDidUpdate p [Object, Object, Object] 











2-14; 移 除 计数 器 组 件 


sb /上 AY n kyd 
2.15 性 能 优化 : 避免 组 件 更 新 
最 后 应 该 了 解 的 生命 周期 方法 是 shouldComponentUpdate(nextProps, nextState)， 它 对 于 
构建 性 能 关键 型 的 应 用 场景 尤为 重要 。 这 个 方法 在 componentwillupdate() 之 前 调用 ， 给 
你 一 个 机 会 进行 判断 ， 当 非 必 需 时 可 以 取消 组 件 更 新 。 


有 一 类 组 件 在 render() 方法 中 只 使 用 了 this.props 和 this.state， 而 没有 其 他 额外 的 函 

数 调用 。 这 一 类 组 件 被 称 为 “ 纯 ” 组 件 。 这 种 组 件 可 以 通过 实现 shouldComponentUpdate() 

方法 ， 用 于 比较 前 后 的 状态 与 属性 。 若 没有 发 生 任 何 变 化 ， 则 返回 false 以 节省 部 分 处 理 
能 力 。 此 外 ， 对 于 没有 使 用 props 和 state 的 纯 静 态 组 件 ， 直 接 返 回 false 即 可 。 


接 下 来 让 我 们 对 render() 方法 的 调用 情况 进行 探索 ， 并 通过 实现 shouldComponentUpdate() 
方法 优化 性 能 。 





[ay 














首先 ， 打 开 我 们 最 新 的 Counter 组 件 。 移 除 之 前 用 到 的 日 志 mixin， 并 在 调用 render() 方 


法 时 打印 日 志 到 控制 台中 : 


var Counter = React.createClass({ 
name: 'Counter', 
// mixins: [logMixin], 
propTypes: { 
count: React.PropTypes.number.isRequired, 


}, 
render() { 
console. log(this.name + '::render()'); 
return React.DOM.span(null, this.props.count); 
} 
}); 


对 TextAreaCounter 组 件 进行 同样 的 操作 : 


var TextAreaCounter = React.createClass({ 
name: 'TextAreaCounter', 
// mixins: [logMixin], 





// 其 他 所 有 方法 


render: function() { 
console. log(this.name + 
// 演 染 的 剩余 部 分 
} 
]); 


:irender()'); 








现在 打开 网 页 ， 并 把 字符 串 LOL 粘贴 到 输入 框 ， 以 替换 原 有 的 Bob， 其 结果 如 图 2-15 所 示 。 














LOL 














Q Elements Network Sources Timeline Profiles Resources Audits 





© Y <top frame> v (Preserve log 
TextAreaCounter: : render() 
Counter: :render() 
> // 全 选 ， 粘 贴 字符 串 LOL 
undefined 
TextAreaCounter: :render() 
Counter: :render() 











图 2-15: 两 个 组 件 都 被 重新 渲染 





组 件 的 
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你 会 发 现 ， 改 变 文 本 会 导致 TextAreaCounter 组 件 的 render() 方法 被 调用 ， 随 后 导致 
Counter 组 件 的 render() 方法 被 调用 。 当 把 Bob 替换 成 LOL 时， 字符 长 度 在 更 新 前 后 不 
会 发 生变 化 ， 因 此 计数 器 的 界面 不 需要 更 新 ， 设 有 必要 调用 Counter 组 件 的 render() X 
法 。 在 这 种 场景 下 ， 可 以 通过 实现 shouLdComponentUpdate() 方法 帮助 React 进行 优化 ， 
在 无 需 额 外 泻 染 时 ， 让 shouldComponentUpdate() 返回 false。 这 个 方法 接收 的 参数 包括 
props 和 state 的 新 值 (在 这 个 组 件 中 无 需 用 到 state) ， 在 方法 中 你 可 以 把 当前 属性 和 新 
的 属性 进行 比较 : 












































shouldComponentUpdate(nextProps, nextState_ignore) { 
return nextProps.count !== this.props.count; 


} 


现在 再 进行 同样 的 操作 、 把 Bob 替换 为 LOL IM, Counter 组 件 不 会 被 重新 泻 染 了 (如 
2-16 PAR) 。 








WR] 
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© Y <top frame> v ( )Preserve log 


TextAreaCounter: : render() 
Counter: :render() 

> // kee FE BOL 
undef ined 





TextAreaCounter:: render() 
> 











图 2-16: 性 能 优化 : 少 进行 一 个 重新 泻 染 周 期 


2.16 PureRenderMixin 





上 述 shouldComponentUpdate() 方法 的 实现 相当 简单 。 想 要 将 其 变 得 更 为 通用 也 并 非 难 事 ， 
你 只 需要 对 this.props 和 nextProps， 以 及 this.state 和 nextState 进行 比较 即 可 。 对 此 ， 
React 通过 mixin 的 形式 提供 了 一 种 通用 实现 ， 并 且 可 以 简单 地 应 用 于 任何 组 件 当 中 。 





方法 如 下 : 





RE 
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<script src="react/build/react-with-addons.js"></script> 
<script src="react/build/react-dom.js"></script> 
<script> 


var Counter = React.createClass({ 
name: ‘Counter’, 
mixins: [React.addons.PureRenderMixin], 
propTypes: { 
count: React.PropTypes.number.isRequired, 
Js 
render: function() { 
console. log(this.name + '::render()'); 
return React.DOM.span(null, this.props.count); 
} 
}); 


Jei 


</script> 


结果 (如 图 2-17 所 示 ) 和 之 前 一 样 : 当 字 符 的 数量 没有 发 生变 化 时 ，Counter 组 件 的 
render() 方法 没有 被 调用 。 














LOL] 
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Sources | Content scripts Snippets 4| 02.17 .lifecycle...NOT-mixin.html x 
v Ofile:// 15 <script src="react/build/react—-with-addons. js"></ 
a 16 <script src="react/build/react—dom.js"></script> 
v|_jUsers/stoyanstefanov/reactboo| 47 <script> 
> (J react/build T as neste tieda 
= 3 var Counter = React.createClass 
=| 02.17. lifecycle-shouldUpdate 59 name: ‘Counter’, 
21 
22 mixins: [React,addons,PureRenderMixin]， 
23 
24 propTypes: { 
{} Line 1, Column 1 
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Filter Regex (Hide network messages A) Errors Warnings Info Logs Del 


TextAreaCounter: : render () 





Counter: : render () 

> // 粘贴 字符 串 LOL 
undefined 
TextAreaCounter: :render() 











2-17; 使 用 PureRenderMixin 轻松 完成 性 能 优化 


要 注意 的 是 ，PureRenderMixin 并 非 React 核心 模块 的 一 部 分 ， 只 是 作为 一 个 React 的 插 
件 版 本 提供 。 因 此 为 了 获取 这 个 mixin， 你 需要 使 用 react/build/react-with-addons. js 
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oH 





代替 react/build/react.js。 前 者 提供 了 一 个 新 的 命名 空间 React.addons， 里 面包 含 了 
PureRenderMixin 和 其 他 一 些 方 便 使 用 的 插件 。' 





如 果 你 不 希望 引入 全 部 插件 ， 或 者 想 要 实现 属于 自己 的 mixin 版 本 ,不妨 参考 一 下 其 实现 。 
这 个 实现 其 实 非 常 简单 直接 ， 仅 仅 是 对 相等 性 进行 浅 层 ( 非 递 归 ) 检查 : 
var ReactComponentWithPureRenderMixin = { 
shouldComponentUpdate: function(nextProps, nextState) { 


return !shallowEqual(this.props, nextProps) || 
!shallowEqual(this.state, nextState); 


Js 








HE 1: React 的 最 新 版 本 提供 了 React.PureComponent 基础 类 ， 因 此 无 需 引 入 该 插件 。 一 一 译 者 注 
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到 目前 为 止 ， 你 已 经 学 会 了 如 何 创建 React 


自 定义 组 件 ， 使 用 普通 的 DOM 组 件 和 自 定义 





PaaS GEA) 界面 ， 设 置 属 性 ， 维 护 状 态 ， 挂 载 组 件 的 生命 周期 方法 ， 以 及 通过 避免 


不 必要 的 重新 浑 染 优化 性 能 。 











在 本 章 里 ， 我 们 将 温 故 而 知 新 ， 创 建 一 个 更 有 趣 的 组 件 一 一 数据 表格 。 这 个 组 件 有 点 像 


Microsoft Excel v.0.1.beta 版 本 的 原型 ， 你 可 以 对 数据 表 的 内 容 进行 编辑 、 排 序 、 搜 索 Ci 


选 )， 并 以 可 下 载 的 文件 格式 导出 数据 。 


3.1 构造 数据 


表格 和 数据 是 紧密 联系 的 ， 因 此 这 个 表格 组 件 (不 如 把 它 称 作 Excel 吧 ) 需要 接收 一 个 


数据 数组 和 一 个 表 头 数组 。 为 了 方便 测试 ， 
List_of_bestselling_books) 抓 取 了 一 份 畅 销 





var headers = [ 


l; 


var data = [ 
["The Lord of the Rings", "J. R. R. 


我 们 从 维基 百科 (http://en.wikipedia.org/wiki/ 
HS ll Ze : 


"Book", "Author", "Language", "Published", "Sales" 


Tolkien", 


"English", "1954-1955", "150 million"], 
["Le Petit Prince (The Little Prince)", "Antoine de Saint-Exupéry", 


"French", "1943", "140 million"], 


["Harry Potter and the Philosopher's Stone", "J. K. Rowling", 
"English", "1997", "107 million"], 
["And Then There Were None", "Agatha Christie", 
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"English", "1939", "100 million"], 

["Dream of the Red Chamber", "Cao Xueqin", 
"Chinese", "1754-1791", "100 million"], 

["The Hobbit", "J. R. R. Tolkien", 
"English", "1937", "100 million"], 

["She: A History of Adventure", "H. Rider Haggard", 
"English", "1887", "100 million"], 

1; 


3.2 RAM 


第 一 步 ， 我 们 只 需要 把 表格 头 部 显示 出 来 。 以 下 是 一 个 大 致 骨架 : 





var Excel = React.createClass({ 
render: function() { 
return ( 
React.DOM.table(null, 
React.DOM.thead(null, 
React.DOM.tr(null, 
this.props.headers.map(function(title) { 
return React.DOM.th(null, title); 
}) 


现在 你 已 经 有 了 一 个 可 用 的 组 件 ， 有 具体 用 法 如 下 : 





ReactDOM.render( 
React.createElement(Excel, { 
headers: headers, 
initialData: data, 
}), 
document.getElementById("app") 
); 


输出 结果 如 图 3-1 所 示 。 














Book Author Language Published Sales 





RO Elements Console Sources Network » @1 >: X 
v <div id="app™> 
v <table data—-reactid=".0"> 
v <thead data-reactid=' 
v <tr data-reactid: 








<th data-reactid= ">Book</th> 

<th data-reactid= ">Author</th> 
<th data-reactid= ">Language</th> 
<th data-reactid= ">Published</th> 
<th data-reactid= ">Sales</th> 


</tr> 
html body ve tr th 


Styles | Event Listeners DOM Breakpoints Properties 
I 
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[Filter “Regex (| Hide network messages 





@ Errors Warnings Info Logs Debug Handled 


© » Warning: Each child in an array or iterator should react. js:18788 
have a unique "key" prop. Check the top-level render call using <tr>. 
See https://fb.me/react-warning-keys for more information. 











图 3-1， 泻 染 表 头 


值得 注意 的 是 ， 这 里 用 到 了 数组 类 型 的 map() 方法 ， 其 用 途 是 返回 一 个 包含 子 市 点 组 件 的 
新 数组 。 a a 
传递 到 回调 函数 中 。 在 这 里 ， 回 调 函 数 创建 一 个 新 的 <th> 组 件 并 将 其 作为 国 数 返 回 值 。 





这 就 是 React ZÉ: 你 可 以 使 用 JavaScript 语 法， 并 借助 这 门 语言 的 全 部 特性 去 创建 界面 。 
循环 、 条 件 判 断 等 功能 都 可 以 在 React 中 使 用 ， 你 无 需 学 习 另 一 门 “模板 ”语言 或 语法 即 
可 创建 界 本 











lo 




















在 传递 子 节点 给 组 件 时 ， 既 可 以 传递 一 个 单独 的 数组 参数 ， 也 可 以 把 每 个 子 
节点 作为 独立 的 参数 传递 。 因 此 下 列 两 种 写法 是 等 价 的 : 


// 传递 独立 的 参数 
React.DOM.ul( 

null, 

React.DOM.li(null, 'one'), 

React.DOM. li(null, 'two') 
); 


// 传递 数组 
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React.DOM.ul( 
null, 


React.DOM.li(null, 'one'), 
React.DOM.li(null, 'two') 
] 
); 


3.3 消除 控制 台 的 警告 信息 
a a T fe TH Alt iene 

它 的 意思 是 :“ 数 组 或 交代 器 中 的 每 个 子 节点 应 包含 唯一 的 key 属性 。 请 检查 使 用 了 <tr> 
的 顶层 党 染 调用 。 


使 用 了 <tr> 的 顶层 泻 染 调用 ?由 于 这 个 应 用 现在 只 有 一 个 组 件 ， 不 难 推断 出 问题 出 现 的 地 
方 ， 但 在 现实 开发 中 ， 可 能 有 许多 组 件 都 创建 了 <tr> 元 素 。Excel 仅仅 是 一 个 变量 名 ， 在 
React 外 部 被 赋值 给 一 个 React 组 件 而 已 ， 因 此 React 并 不 知道 这 个 组 件 的 名 字 叫 Excel, 
你 可 以 通过 给 组 件 声明 一 个 displayName 属性 来 解决 这 个 问题 

















var Excel = React.createClass({ 
displayName: 'Excel', 
render: function() { 
A sie 
} 
}; 


现在 React 可 以 识别 问题 出 在 哪里 了 ， 警 告 信息 变 为 “Each child in an array should have a 
unique “key” prop. Check the render method of `Excel'.”。 这 样 调试 就 方便 多 了 ， 但 警告 信息 
依然 存在 。 为 了 修复 这 个 问题 ， 只 需要 根据 警告 去 检查 代码 即 可 。 现 在 你 已 经 知道 问题 发 
生 在 哪个 render() 函数 中 : 














this.props.headers.map(function(title, idx) { 
return React.DOM.th({key: idx}, title); 
p) 


这 个 函数 做 了 什么 事情 ?传递 给 ee 的 回调 函数 被 调用 时 会 提供 三 个 
BR. 元 素 的 值 、 元 素 的 索引 值 (0、 as) 和 整个 数组 。 你 只 需要 把 每 个 元 素 的 索引 
值 (idx) 提供 给 React 作为 A A. 这 个 key 属性 只 需要 在 该 数组 中 保持 唯一 ， 而 
不 需要 保证 在 整个 React 应 用 中 唯一 。 


现在 key 的 问题 已 经 被 修复 了 ， 加 上 一 点 CSS 进行 美化 ， 你 就 可 以 享受 这 个 新 组 件 的 
0.0.1 版 本 了 。 A 而 且 控 制 台 警 告 已 经 消失 了 (如 图 3-2 所 示 ) 。 
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Q Elements Network | Sources | Timeline Profiles Resources Audits » > *# a 
[So... Ga Sm. [E] table-th htm! x | 上 | 
<SCript> 


了 © file:// 14 var Excel = React.createClass({ 
vi_JUsers/stoya 15 displayName: ‘Excel’, 
> Gi react /bul 9 renger: Tunctionl) { 
Itable-th.H 18 React.DOM.table(null, 
3 19 React.DOM. thead (null 
& table.css | 39 React. DOM. tr(null, 
21 this.props.headers.map(function(title, idx) { 
22 return React.DOM.th({key: idx}, title); 
23 }) 

















JA 





} 
29 }); 
{} Line 1, Column 1 
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> 











图 3-2: 泻 染 没有 警告 的 表格 组 件 


仅仅 为 了 调试 而 添加 displayName 的 做 法 似乎 有 些 麻 烦 ， 不 过 还 有 更 方便 的 
方法 : 使 用 JSX (会 在 第 4 章 讨论 ) 就 不 需要 再 定义 这 个 属性 ， 名 字 会 自动 
产生 。 























3.4 添加 <td> 内 容 

既然 已 经 完成 了 漂亮 的 表 头 部 分 ， 现 在 是 时 候 添 加 表格 内 容 了 。 表 头 中 的 内 容 是 一 个 一 维 
数组 (单行 )， 但 是 data 是 二 维 的 。 因 此 你 需要 双重 循环 : 外 层 循 环 遍历 行 ， 而 内 层 要 经 
过 每 一 行 中 的 每 一 个 数据 (单元 格 )。 这 可 以 通过 前 面 提 到 的 .map() 方法 完成 : 
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data.map(function(row) { 
return ( 
React.DOM.tr(null, 
row.map(function(cell) { 
return React.DOM.td(null, cell); 
p 


J; 
}) 





此 外 ， 还 需要 考虑 data 变量 本 身 : 数据 从 哪里 来 ”如 何 更 改 数据 ? Excel 组 件 调用 者 应 
该 可 以 传递 初始 的 表格 数据 。 但 随后 数据 可 能 会 发 生变 化 ， 因 为 用 户 可 能 会 对 表格 进行 排 
序 、 编 辑 等 操作 。 换 名 话说 ， 组 件 的 state 会 发 生变 化 。 因 此 ， 我 们 使 用 this.state.data 
保持 跟踪 数据 变化 ， 使 用 thts.props.inittatpata 进行 组 件 初 始 化 。 目 前 完整 的 实现 看 起 
来 类 似 于 下 面 这 样 (结果 如 图 3-3 所 示 ) : 
































getInitialState: function() { 
return {data: this.props.initialData}; 


} 


render: function() { 
return ( 
React.DOM.table(null, 
React.DOM.thead(null, 
React.DOM.tr(null, 
this.props.headers.map(function(title, idx) { 
return React.DOM.th({key: idx}, title); 
}) 
) 
); 
React.DOM.tbody(null, 
this.state.data.map(function(row, idx) { 
return ( 
React.DOM.tr({key: idx}, 
row.map(function(cell, idx) { 
return React.DOM.td({key: idx}, cell); 
p) 









































Book Author Language Published Sales 
The Lord of the Rings Jd. R. R. Tolkien English 1954-1955 150 million 
(The Little Prince) Antoine de Saint-Exupéry French 1943 140 million 
‘Harry Potter and the Philosopher's Stone J. K. Rowling English 1997 107 million 
And Then There Were None Agatha Christie English 1939 100 million 
Dream of the Red Chamber Cao Xueqin Chinese 1754-1791 100 million 
The Hobbit J. R. R. Tolkien English 1937 100 million 
She: A History of Adventure H. Rider Haggard English 1887 100 million 
ROD Elements Console Sources Network Timeline Profiles Resources Audits React 
htm= 
> <head>..</head> 
Y <body> 


v<div id="app"> 
vV<table data-reactid=".0"> 
> <thead data-reactid 

w <tbody data-react 

> <tr data-reacti 
> <tr data-reactid=".0.1. 
> <tr data-reactid=".0.1, 
> <tr data-reactid=".0.1. 
> <tr data-reactid=".0.1. 
><tr data-reactid=".0.1. 
v<tr data-reactid=".0.1. 
td data-reactid: 
<td data-reactid: 
<td data-reactid: 
<td data-reactid=" 


















«$6. $2">English</td> 
. $6.$3">1887</td> 
<td data—reactid=".0.1.$6.$4">100 million</td> 
</tr> 
</tbody> 








可 以 看 到 ， 重 复 {key: idx} 使 得 组 件数 组 中 的 每 个 元 素 都 拥有 唯一 的 键 名 。 虽 然 所 有 
的 .map() 循环 都 是 从 索引 0 开始 的 ， 但 是 没有 关系 ， 因 为 key 只 需要 保证 在 当前 循环 中 唯 
一 ， 而 不 是 在 整个 应 用 中 唯一 。 






































render() 国 数 现在 已 经 有 点 复杂 、 难 以 理解 了 ， 特 别 是 闭合 括号 } 和 )。 别 
担心 ，JSX 可 以 帮助 你 减轻 痛苦 1 








前 面 的 代码 片段 中 省 略 了 propTypes 属性 (尽管 这 个 属性 是 可 选 的 ， 但 是 推荐 使 用 )。 该 
属性 既 可 以 用 作 数 据 验 证 ， 也 可 以 为 组 件 提供 文档 。 具 体 到 这 个 例子 ， 我 们 要 尽量 减少 用 
户 提供 垃圾 数据 到 这 个 漂亮 Excel 组 件 的 可 能 性 。React.PropTypes 提供 了 一 个 array 验证 
器 ， 以 确保 属性 总 是 一 个 数组 。 此 外 ， 它 还 提供 了 一 个 arrayof 函数 ， 以 验证 数组 元 素 的 
有 具体 类 型 。 在 这 个 例子 中 ， 我 们 让 表 头 标题 和 表格 数据 都 只 接受 字符 串 数组 ， 














propTypes: { 
headers: React.PropTypes.arrayOf( 
React.PropTypes.string 
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); 
initialData: React.PropTypes.array0f( 
React.PropTypes.arrayOf( 
React.PropTypes.string 
) 
); 
}, 


现在 数据 检查 足够 严格 了 | 


如 何 改进 该 组 件 

对 于 一 个 普通 的 Excel 电子 表格 而 言 ， 只 能 接受 字符 串 数据 显得 过 于 苛刻 。 作 为 练习 ， 你 

es 更 多 数据 类 型 (React.PropTypes.any) 并 根据 不 同类 型 进行 不 同方 式 的 这 
Be (例如 ， 右 对 齐 数字 类 型 的 数据 ) 。 


3.5 HEF 


当 你 看 见 网 页 中 的 表格 时 ， 是 否 想 对 其 进行 各 种 各 样 的 排序 呢 ? 幸运 的 是 ， 这 个 需求 可 以 
用 React 轻松 完成 。 事 实 上 ， 这 个 例子 恰恰 体现 了 React 的 办 光 之 处 ， iene viene 
是 对 数据 数组 进行 排序 ， 而 React 将 帮 你 完成 界面 的 更 新 。 


首先 ， 在 表 头 处 添加 一 个 点 击 事件 处 理 器 : 





























React.DOM.table(null, 
React.DOM.thead({onClick: this._sort}, 
React.DOM.tr(null, 
II wax 


现在 ， 让 我 们 实现 sort 函数 。 首 先 你 要 知道 根据 哪 一 列 进行 排序 。 这 可 以 通过 触发 事件 
的 对 象 (在 这 里 是 表 头 <th> 标签 ) 的 ceLLIndex 属性 取得 : 








var column = e.target.cellIndex; 


你 可 能 很 少见 到 有 人 在 应 用 开发 中 使 用 cel Index 属性 。 这 是 一 个 早 在 DOM 
Level 1 就 被 定义 的 属性 ， 其 定义 为 " 这 个 单元 格 在 该 行 中 的 索引 值 "。 它 随 
后 在 DOM Level 2 中 被 定义 为 只 读 属 性 。 





























你 还 需要 一 份 要 排序 的 数据 副本 。 如 有 果 你 直接 使 用 数据 的 sort() 方法 ， 会 直接 修改 原 数 
组 ， 也 就 意味 着 this.state.data.sort() 会 修改 this.state。 你 已 经 知道 this.state 是 不 
应 该 被 直接 修改 的 ， 只 能 通过 setstate() 修改 : 








// 复制 数据 


var data = this.state.data.slice(); // 或 者 使 用 ES6 中 的 Array.from(this.state.data) 





接 下 来 ， 排 序 功 能 可 以 通过 sort() 方法 中 传 入 的 回调 函数 完成 : 
data.sort(function(a, b) { 
return a[column] > b[column] ? 1: -1; 
}); 
最 后 ， 通 过 setState() 设置 排序 后 的 新 数据 : 
this.setState({ 
data: data, 


F); 
现在 ， 当 你 点 击 表 头 时 ， 内 容 会 按照 字母 顺序 排序 (如 图 3-4 所 示 )。 













































































Book Author Language Published Sales 
And Then There Were None Agatha Christie English 1939 100 million 
Dream of the Red Chamber Cao Xueqin Chinese 1754-1791 100 million 
Harry Potter and the Philosopher's Stone J. K. Rowling English 1997 107 million 
Le Petit Prince (The Little Prince) Antoine de Saint-Exupéry French 1943 140 million 
She: A History of Adventure H. Rider Haggard English 1887 100 million 
The Hobbit J. R. R. Tolkien English 1937 100 million 
The Lord of the Rings J. R. R. Tolkien English 1954-1955 150 million 
Q Elements Network | Sources| Timeline Profiles Resources Audits Console React 2 & oO, 
|s... lex Sic ills | table-sort.html x | > 
v © file:// 32 _sort: function(e) { 
vf Users/std 33 var column = e.target.cellIndex; 
PEAR 34 var data = this.state.data.slice(); 
>(Jreact/b) 35 data.sort(function(a, b) { 
[s|table-s| 36 one a[column] > b[column]; 
= 37 H 
=l table.c$ 38 this.setState({ 
39 data: data 
40 »; 
41 }, 
42 
43 render: function() { 
44 return ( 
45 React.DOM.table(null, 
46 React.DOM.thead({onClick: this._sort}, 
47 React.DOM.tr(null, 
48 this.props.headers.map(function(title, idx) { 
49 return React.DOM.th({key: idx}, title); 

















3-4; 按照 书 名 排序 




















就 是 这 么 简单 ， 你 完全 不 需要 关心 视图 泻 染 。 在 render() 方法 中 ， 你 已 经 一 次 性 为 组 件 定 
义 了 在 给 定 某 些 数据 时 如 何 进行 展现 。 当 数据 发 生 改 变 时 ， 视 图 也 会 对 应 更 新 ， 但 你 不 再 








需要 关心 它 是 如 何 变化 的 了 。 
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如 何 改进 该 组 件 


这 里 用 到 的 排序 逻辑 相当 简单 ， 仅 仅 满 足 了 关于 React 话题 的 讨论 。 你 可 以 让 它 变 得 更 加 
出 色 : 比如 对 内 容 进行 解析 ， 当 其 值 是 数字 时 ， 可 以 选择 带 或 不 带 单 位 等 。 


3.6 HEF n 


现在 表格 已 经 排 好 序 了， 但 用 户 不 能 清晰 地 看 到 表格 是 根据 哪 一 列 进行 排序 的 。 让 我 们 更 
新 一 下 界面 ， 在 进 和 广 的 那 一 列 显示 一 个 箭头 符号 。 与 此 同时 ， 我 们 还 将 实现 降序 排列 
的 功能 


为 了 跟踪 新 的 状态 ， 你 需要 添加 以 下 两 个 新 属性 。 















































e this.state.sortby 
当前 被 选择 的 列 索引 值 
e this.state.descending 
一 个 布尔 类 型 的 标记 ， 决 定 按照 升序 还 是 降序 排列 
getInitialState: function() { 
return { 
data: this.props.initialData, 
sortby: null, 
descending: false, 
}; 
}, 


在 _sort() 函数 中 ， 你 可 以 指定 采用 其 中 哪 种 方法 进行 排序 。 默 认为 升序 排列 ， 在 当前 选 
中 的 列 索引 和 之 前 一 样 并 且 当 前 还 不 是 降序 排列 时 ， 则 进行 降序 排列 ， 























var descending = this.state.sortby === column && !this.state.descending; 


你 还 需要 对 排序 的 回调 函数 进行 一 点 调整 : 





data.sort(function(a, b) { 
return descending 
? (a[column] < b[column] ? 1: -1) 
: (a[coLumn] > b[column] ? 1: -1); 
}); 


最 后 ， 你 需要 设置 新 的 state: 





this.setState({ 
data: data, 
sortby: column, 
descending: descending, 


F); 
还 剩 一 件 事 情 需要 完成 ， 那 就 是 修改 render() 函数 ， 指 出 当前 的 排序 方向 。 对 于 当前 已 排 
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好 序 的 那 一 列 ， 让 我 们 在 标题 上 添加 一 个 箭头 符号 : 





this.props.headers.map(function(title, idx) { 


if (this.state.sortby === idx) { 
title += this.state.descending ? ' \u2191' : ' \u2193' 
} 
return React.DOM.th({key: idx}, title); 
}, this) 





现在 我 们 完成 了 排序 功能 。 用 户 可 以 对 任意 列 进行 排序 : 首次 点 击 时 对 该 列 进行 升序 排 
列 ， 再 点 击 一 次 可 以 进行 降序 排列 ， 而 视图 会 给 出 对 应 的 视觉 提示 (如 图 3-5 所 示 )。 








































































































Book Author + Language Published Sales 
The Hobbit J. R. R. Tolkien English 1937 100 million 
The Lord of the Rings J. R. R. Tolkien English 1954-1955 150 million 
Harry Potter and the Philosopher's Stone J. K. Rowling English 1997 107 million 
She: A History of Adventure H. Rider Haggard English 1887 100 million 
Dream of the Red Chamber Cao Xueqin Chinese 1754-1791 100 million 
Le Petit Prince (The Little Prince) Antoine de Saint-Exupéry French 1943 140 million 
And Then There Were None Agatha Christie English 1939 100 million 
(ol Elements Network | Sources| Timeline Profiles Resources Audits Console React > & oO. 
[Siz lez S 加 | table-sortby.html X | pl | 
v Ofile:// 34 a 
~ 35 
v Users/std 36 _sort: function(e) { 
> react/b| 37 var column = e.target.cellIndex; 
smsen 38 var data = this.state.data.slice(); 
— | 39 var descending = this.state.sortby === column && !this,.state.descending; 
sjtable.cs 40 data.sort(function(a, b) { 
41 return descending 
42 ? alcolumn] < b{column] 
43 : alcolumn] > b{column]; 
44 H; 
45 this. setState({ 
46 data: data, 
47 sortby: column, 
48 descending: descending 
49 H; 
50 }, 














3-5: 升序 /降序 排列 


3.7 ”编辑 数据 
接 下 来 ， 我 们 要 让 用 户 可 以 在 这 个 Excel 表格 组 件 中 编辑 数据 。 下 面 介绍 的 解决 方案 包括 


三 个 步 又 。 


(1) 双击 一 个 单元 格 。Excel 找 出 点 击 的 单元 格 ， 并 把 表格 内 容 从 简单 的 文本 变 为 一 个 预先 
填充 了 原 内 容 的 输入 框 (如 图 3-6 所 示 )。 
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Book Author Language Published Sales 





The Lord of the Rings J. R. R. Tolkien English 1954-1955 150 million 











3-6: 双击 单元 格 时 ， 内 容 变 为 一 个 数据 杠 


(2) 编辑 内 容 (如 图 3-7 所 示 )。 

















Book Author Language Published Sales 
The Lord of the Rings J. R. R. Tolkien English 1954-1955 1200| million 
Le Petit Prince (The Little Prince) Antoine de Saint-Exupéry French 1943 140 million 














3-7: 编辑 内 容 


(3) 殴 下 回 车 。 输 入 框 消失 ， 表 格 数据 更 新 为 新 输入 内 容 (如 图 3-8 所 示 )。 

















Book Author Language Published Sales 
The Lord of the Rings J. R. R. Tolkien English 1954-1955 200 million 
Le Petit Prince (The Little Prince) Antoine de Saint-Exupéry French 1943 140 million 














图 3-8: A TOFS, BARAS 


3.7.1 可 编辑 单元 格 


首先 要 设置 一 个 简单 的 事件 监听 器 。 当 用 户 双击 时 ， 组 件 “ 记 住 ”用 户 选 择 的 单元 格 : 











React.DOM.tbody({onDoubleClick: this._showEditor}, ....) 

















这 里 并 没有 使 用 W3C 规范 的 ondblctlick， 而 是 使 用 了 更 友好 、 更 易于 阅读 
的 onDoubleClick, 





_showEditor 函数 就 像 下 面 这 样 : 


_showEditor: function(e) { 
this.setState({edit: { 
row: parseInt(e.target.dataset.row, 10), 
cell: e.target.cellIndex, 








H; 
}, 
这 里 发 生 了 什么 ? 
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。 这 个 函数 设置 了 this.state 中 的 edit 属性 。 该 属性 在 进入 编辑 状态 之 前 是 nuLL， 之 后 
则 变 为 一 个 包含 了 属性 row 和 cell 的 对 象 ， 这 两 个 属性 分 别 代 表 被 编辑 单元 格 的 行 索 
引 值 和 列 索引 值 。 所 以 如 果 你 点 击 的 是 最 开始 的 单元 格 ,this.state.edit 的 值 就 是 {row: 
0, cell: 0}, 

。 为 了 算出 单元 格 的 索引 值 , 和 之 前 一 样 , 你 需要 使 用 e.target.ceLLIndex, 其 中 e.target 
指向 的 是 被 双击 的 单元 格 <td>。 

。 在 DOM 结构 中 没有 直接 获取 rowIndex 的 方法 ， 你 需要 自己 设 定 一 个 data- 自 定 义 

属性 。 每 个 单元 格 都 应 该 包含 data-row 属性 ， 并 设置 为 行 索 引 值 ， 然 后 你 可 以 使 用 

parseInt() 取得 该 索引 值 。 


最 后 ， 还 有 一 些 说 明和 先决 条 件 。 首 先 ，edit 属性 在 一 开始 是 不 存在 的 ， 所 以 要 在 
getInitialstate() 方法 中 进行 初始 化 。 现 在 的 getInitialstate() 方法 应 该 如 下 所 示 : 

































































getInitialState: function() { 
return { 
data: this.props.initialData, 
sortby: null, 
descending: false, 
edit: null, // {row: index, cell: index} 
}; 
}, 


data-row 属性 用 于 跟踪 行 索引 。 现 在 tbody() 的 整个 结构 就 像 这 样 : 


React.DOM.tbody({onDoubleClick: this._ showEditor}, 
this.state.data.map(function(row, rowidx) { 
return ( 
React.DOM.tr({key: rowidx}, 
row.map(function(cell, idx) { 
var content = cell; 


// TODO - 如 果 idx 和 rowidx 的 值 与 当前 单元 格 匹配 ， 
// 则 把 content 变 为 一 个 输入 框 ;否则 只 需 展示 文本 内 容 














return React.DOM.td({ 
key: idx, 
"data-row': rowidx 

}, content); 

}, this) 
) 
); 
}, this) 
) 


最 后 需要 完成 TODO 中 的 未 实现 功能 。 我 们 需要 在 特定 条 件 下 生成 一 个 文本 框 区 域 。 由 于 调 
用 setState() 方法 设置 了 edit 属性 ， 整 个 render() 方法 会 被 再 次 调用 。React 对 表格 进 
行 重新 泻 染 ,给 了 你 一 个 在 双击 表格 时 更 新 单元 格 内 容 的 机 会 。 
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3.7.2 输入 字段 的 单元 格 
现在 把 TODO 注释 替换 为 具体 人 代码。 首先 ， 我 们 需要 取得 编辑 状态 的 state 值 : 





var edit = this.state.edit; 


判断 edit 属性 是 否 已 设置 。 如 果 是 ， 则 判断 当前 单元 格 是 否 为 待 编辑 单元 格 : 





if (edit && edit.row === rowidx && edit.cell === idx) { 
NA ee 
} 


如 果 匹 配 到 目标 单元 格 ， 就 创建 一 个 表单 和 一 个 输入 框 ， 并 把 内 容 填充 到 输入 机 


EI 
+ 











content = React.DOM.form({onSubmit: this._save}, 
React.DOM. input({ 
type: 'text', 
defaultValue: content, 
}) 
)3 
如 你 所 见 ， 这 个 表单 仅 有 一 个 输入 框 ， 输 入 框 里 预 填 充 了 单元 格 的 文本 内 容 。 当 提交 表单 
时 ， 会 进入 私有 方法 _save() 的 调用 中 。 


3.7.3 RE 
要 完成 编辑 功能 ， 还 需要 在 用 户 完 成 输入 并 提交 表单 (通过 按 下 回 车 键 ) 时 ， 保 存 内 容 
更 改 : 














_save: function(e) { 
e.preventDefault(); 
// 进行 保存 

}, 


在 避免 浏览 器 默认 行为 后 (目的 是 避免 网 页 重新 加 载 )， 你 需要 取得 一 个 输入 框 的 引用 : 





var input = e.target.firstChild; 


复制 一 份 原 有 数据 ， 避 免 直 接 操作 this. state: 


var data = this.state.data.slice(); 


使 用 新 的 值 修改 原 有 数据 。 单 元 格 的 行 索引 和 列 索 引 可 以 通过 state 的 edit 属性 取得 : 








data[this.state.edit.row][this.state.edit.cell] = input.value; 


最 后 更 新 state, MLA BTM : 











this.setState({ 


edit: null, // 完成 编辑 
data: data, 


})s 


3.7.4 结论 与 虚拟 DOM Diff 算法 
现在 ， 编 辑 功 能 已 经 完成 了 。 这 个 功能 不 需要 我 们 编写 太 多 代码 ， 你 需要 做 的 仅仅 是 : 





。 通过 this.state.edit 属性 跟踪 需要 编辑 的 单元 格 ; 

。 在 泻 染 时 ， 如 果 单 元 格 的 行列 索引 匹配 到 用 户 双 击 的 单元 格 ， 则 在 该 单元 格 中 显示 输 
入 框 ， 

从 输入 框 获 取 新 输入 的 值 ， 更 新 表格 数据 的 数组 。 























当 你 使 用 setState() 方法 更 新 数据 时 ，React 将 会 调用 组 件 的 render() 方法 ， 让 界面 如 魔 
般 地 更 新 。 也 许 仅仅 因为 一 个 单元 格 的 变化 而 更 新 整个 表格 看 起 来 不 够 高 效 ， 但 React 
际 上 只 会 修改 一 个 单元 格 。 











n a = 




















如 果 你 打开 浏览 器 开发 工具 ， 可 以 看 到 当 你 和 应 用 进行 交互 时 DOM 树 的 哪个 部 分 得 到 了 
更 新 。 在 图 3-9 中 可 以 看 到 ， 当 把 The Lord of the Rings 的 语言 一 栏 从 English 改 为 Engrish 
时 ， 开 发 者 工具 会 高 亮 显 示 DOM 结构 的 改变 。 






































Book Author Language Published Sales 
The Lord of the Rings J. R. R. Tolkien Engrish 1954-1955 150 million 
Le Petit Prince (The Little Prince) Antoine de Saint-Exupéry French 1943 140 million 
Harry Potter and the Philosopher's Stone J. K. Rowling English 1997 107 million 
And Then There Were None Agatha Christie English 1939 100 million 
Dream of the Red Chamber Cao Xueqin Chinese 1754-1791 100 million 
The Hobbit J. R. R. Tolkien English 1937 100 million 
She: A History of Adventure H. Rider Haggard English 1887 100 million 














a | Elements | Network Sources Timeline Profiles Resources Audits Console React 





<html> 
> <head>..</head> 
v <body> 
<div id="app"> 
了 <tabte data-reactid=". 0"> 
><thead data-reactid=' " 
v<tbody data-reactid=' 
v<tr data-reactid=". 
<td data-row="0" data- reactid=".0.1. 
<td data-row="0" data-reactid=".0.1. 
< 国 data-row="0" data-reactid=".0.1. 
<td data-row="0" data-reactid=".0.1. 
<td data-row="0" data-reactid=".0.1. 
</tr> 
> <tr data-reactid=" .0.1.$1">..</tr> 
> <tr data-reactid=".0.1.$2">..</tr> 
> <tr data—reactid=".0.1.$3">..</tr> 


83-9: 高 亮 显示 DOM 结构 的 改变 





6" athe Lord of the Rings</td> 
R. Be Tolkien</td> 























在 幕后 ，React 调用 了 render() 方法 ， 并 根据 预期 DOM 结果 创建 了 一 个 轻 量 级 的 树 形 表 
达 。 这 被 称 为 虚拟 DOM 树 。 当 再 次 调用 render() 方法 时 (比如 在 调用 setState() 方法 之 
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Jat), React 对 于 前 后 的 虚拟 树 作出 比较 ， 


览 器 


在 图 3-9 中 ， 单 元 格 只 发 生 了 一 处 改变 ， 


因此 疫 有 必要 重新 谊 染 


计算 出 diff。 基 于 diff, React 可 以 计算 出 改变 浏 
DOM 结构 所 需 的 最 小 DOM 操作 (比如 appendchild(), 


textContent 等 ) 。 


整个 表格 。React 通过 计 





算 改 变 的 最 小 集合 ， 批 量 进 行 DOM 操作 。 众 所 周知 ，DOM 操作 是 很 耗 时 的 ( 相 比 于 纯 





JavaScript 操作 、 函 数 调用 等 )， 
React 会 尽量 减少 DOM 操作 。 


简 而 言 之 ， 对 于 性 能 和 界面 更 新 ，React 通 








。 轻 量 级 操作 DOM 
。 使 用 事件 委托 响应 用 户 交互 





3.8 搜索 


并 且 通 常会 成 为 大 型 Web 应 用 程序 泻 染 性 








PEMS, KE 








过 以 下 方式 给 予 你 支持 : 





下 一 步 ， 我 们 为 Excel 组 件 增 加 一 个 搜索 功能 ， 允 许 用 户 过 滤 表 格 内 容 。 我 们 计划 这 样 做 : 


增加 一 个 按钮 作为 这 个 新 功能 的 开关 (如 图 


3-10 所 示 ) ; 








search 





Book 


Author Langu 





The Lord of the Rings 


J. R. R. Tolkien Englist 





Le Petit Prince (The Little Prince) 


Antoine de Saint-Exupéry French 











| | Elements| Network Sources Timeline Profiles Resources Audits Console React 





render: function() { 
return ( 
React.DOM.div(null, 
this._renderToolbar(), 
this._renderTable() 
) 
) 
h 
_renderToolbar: function() { 
recurn React. DOM. button ( 


className: ‘toolbar 


"Search! 

i 
} 
_renderSearch: function() { 

if (!this.state.search) { 

了 return null; 

return ( 

return React.DOM. td({key: 
React. DOM. input ({ 


type: ‘text', 
"data-idx': idx, 


_renderTable: function() { 
var self = this; 





React.DOM.tr({onChange: this._: i 
thas props headers map (functicn(-tgnore; idx) { 


onClick: this._toggleSearch, 


search} 


idx}, 





3-10: 搜索 按钮 











如 果 打 开 搜 索 功 能 , 则 在 表格 中 新 增 一 行 输入 框 ,每 个 输入 框 各 自负 责 搜索 对 应 的 列 (如 
图 3-11 所 示 ) ; 




















search 





Book Author Language 





The Lord of the Rings ae English 


Q |Elements| Network Sources Timeline Profiles Resources Audits Console React 








r <html> 
> <head>...</head> 
v <body> 
v <div id="app"> 
v <div data-reactid=".0"> 
<button class="toolbar" data-reactid=".0.0">search</button> 
v <table data—reactid=".0.1"> 
> <thead data-reactid=".0.1.0">..</thead> 
w<tbody data-reactid=".0.1.1"> 
v <tr data-reactid=".0.1.1.0"> 
i +1.1.0.$0">..</td> 








v <td data-reactid 1.1.0.$1"> 
</td> 

> <td data—reactid=".0.1.1.0.$2">..</td> 
> <td data-reactid=".0.1.1.0.$3">..</td> 
> <td data-reactid=" ,0.1.1.0.$4">...</td> 
</tr> 

> <tr data-reactid=".0.1.1.1:$0">.</tr> 

> <tr data-reactid=".0.1.1.1:$1">.</tr> 

> <tr data-reactid=".0.1.1.1:$2">.</tr> 

> <tr data-reactid=".0.1.1.1:$3">.</tr> 

ù rtr data—rasactid—" A 1 1 1¢Al~、 sitas 








B 3-11: 一 行 用 于 搜索 /筛选 的 输入 框 





当 用 户 在 输入 框 中 输入 内 容 时 ， 对 state.data 数组 进行 筛选 ， 只 显示 匹配 的 内 容 (如 
图 3-12 所 示 ) 。 




















Search 























Book Author Language Published Sales 
EL | 
The Lord of the Rings J. R. R. Tolkien English 1954-1955 150 million 
Harry Potter and the BE A a 
Philosopher's Stone J. K. Rowling English 1997 107 million 
The Hobbit J. R. R. Tolkien English 1937 100 million 














B 3-12: 搜索 结果 
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3.8.1 状态 与 界面 
首先 ， 要 给 this.state 对 象 添加 一 个 search 属性 ， 以 追踪 搜索 功能 是 否 打 开 : 


getInitialState: function() { 
return { 
data: this.props.initialData, 
sortby: null, 
descending: false, 


edit: null, // [ 行 索 引 ， 列 索引 ]， 


search: false, 
}; 
]， 
下 一 步 是 更 新 界面 。 为 了 让 代码 变 得 更 加 易于 管理 ， 我 们 要 把 render() 函数 分 隔 成 
若干 个 专用 的 小 代码 块 。 目 前 render() 国 数 只 这 染 了 一 个 表格 。 我 们 把 它 重 命名 为 
_renderTable() 方法 。 接 下 来 ， 搜 索 按钮 将 成 为 整个 工具 栏 的 一 部 分 (很 快 还 要 添加 一 个 
“输出 ”功能 )， 因 此 我 们 把 按钮 的 泻 染 放 在 _renderToolbar() 中 ， 作 为 该 方法 的 一 部 分 。 











目前 的 代码 如 下 所 示 : 


render: function() { 
return ( 
React.DOM.div(null, 
this._renderToolbar(), 
this._renderTable() 


)s 
F; 


_renderToolbar: function() { 
// TODO 


2 


_renderTable: function() { 
// 和 之 前 的 render( ) 方 法 功能 相同 
F 
如 你 所 见 ， 新 的 render() 函数 返回 一 个 div 组 件 ， 包 含 两 个 子 元 素 : 工具 栏 和 表格 。 你 已 
经 知道 表格 是 如 何 泻 染 的 了 ， 而 且 工 具 栏 目前 仅 需 泻 染 一 个 按钮 : 





_renderToolbar: function() { 
return React.DOM.button( 


{ 
onClick: this._toggleSearch, 
className: 'toolbar', 


}, 


"search' 


} 





如 果 开 启 搜索 功能 (意味 着 this.state.search 的 值 被 设置 为 true) ， 你 需要 泻 染 一 行 输入 
框 组 件 。 我 们 使 用 _renderSearch() 来 处 理 这 件 事情 : 


_renderSearch: function() { 
if (!this.state.search) { 
return null; 


return ( 
React.DOM.tr({onChange: this._search}, 
this.props.headers.map(function(_ignore, idx) { 
return React.DOM.td({key: idx}, 
React.DOM.input({ 
type: 'text', 
"data-idx': idx, 





如 你 所 见 ， 搜 索 功能 关闭 时 ， 这 个 函数 不 需要 泻 染 任何 内 容 ， 因 此 函数 返回 null, 43 

还 有 另 一 种 方法 ， 就 是 让 函数 调用 者 根据 搜索 开关 决定 是 否 调用 该 函数 。 不 过 相 比 之 下 ， 

前 者 有 助 于 简化 _renderTable() 函数 。 现 在 只 需要 对 _renderTable() 函数 进行 如 下 修改 
邮 即 可 。 








电 修改 前 : 


React.DOM.tbody({onDoubleClick: this._showEditor}, 
this.state.data.map(function(row, rowidx) { // ... 


修改 后 : 


React.DOM. tbody({onDoubleClick: this._showEditor}, 
this._renderSearch(), 
this.state.data.map(function(row, rowidx) { // ... 


搜索 输入 框 仅仅 是 data 主 循环 (负责 创建 表格 的 所 有 行列 ) BI HAP. 
_renderSearch() 方法 返回 null 时 ，React 简单 地 跳 过 这 个 额外 子 节点 ， 并 进行 接 下 来 的 表 
ria. 














目前 我 们 已 经 完成 了 搜索 功能 的 界面 修改 。 接 下 来 要 关注 搜索 功能 的 实际 业务 逻辑 了 。 











3.8.2 MEAR 
我 们 打算 把 搜索 功能 做 得 非常 简单 ， 接收 一 个 内 容 数组 ， 对 其 调用 Array. prototype. 
fttter() 方法 进行 筛选 ， 然 后 返回 一 个 经 过 过 滤 的 数组 ， 包 含 符合 搜索 字符 串 的 所 有 元 素 。 
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界 














而 依然 使 用 this.state.data 进行 演 染 ， 但 this.state.data 的 内 容 


会 被 过 滤 掉 一 部 分 。 





你 需要 在 搜索 之 前 复制 一 份 完整 的 数据 ， 避 免 在 搜索 之 后 丢失 数据 。 








这 样 用 户 可 以 回 到 整 








个 表格 中 ， 也 可 以 改变 搜索 关键 词 以 获取 不 同 的 匹配 数据 。 我 们 把 这 份 数 据 的 副本 (实际 


上 是 一 份 引 用 ) 称 为 _preSearchData: 


var Excel = React.createClass({ 


// 业务 逻辑 
_preSearchData: null, 


// 更 多 逻辑 
BE 


当 用 户 点 击 search 按钮 进行 搜索 时 ，_toggleSearch() 方法 会 被 调用 
搜索 功能 的 打开 与 关闭 。 有 具体 逻辑 如 下 ; 








。 根据 开关 设置 this.state.search 的 值 为 true 或 者 false, 
。 在 开启 搜索 功能 时 ,“ 记 住 ” 原 有 数据 ; 
。 在 关闭 搜索 功能 时 ， 恢 复原 有 数据 。 


这 个 函数 的 具体 逻辑 如 下 所 示 : 




















_toggleSearch: function() { 
if (this.state.search) { 
this.setState({ 
data: this._preSearchData, 
search: false, 
D; 
this._preSearchData = null; 
} else { 
this._preSearchData = this.state.data; 
this.setState({ 
search: true, 
p; 
} 
}; 


最 后 还 需要 实现 _search() 国 数 。 每 当 搜索 行 中 的 内 容 发 生 改变 ， 


。 这 个 函数 负责 切换 











就 是 用 户 在 其 中 一 个 





输入 框 里 输入 内 容 时 ， 该 函数 会 被 调用 。 以 下 是 函数 的 完整 实现 ， 以 及 一 些 详细 说 明 : 





_search: function(e) { 
var needle = e.target.vaLlue.toLowerCase(); 
if (!needle) { // 当 搜 索 字 符 串 被 删除 时 
this.setState({data: this._preSearchData}); 
return; 








} 

var idx = e.target.dataset.idx; // 需要 搜索 的 那 一 列 的 索引 值 

var searchdata = this._preSearchData.filter(function(row) { 
return row[idx].toString().toLowerCase().indexOf (needle) > 


-1; 
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}); 
this.setState({data: searchdata}); 


}, 
你 可 以 通过 变化 的 事件 目标 (输入 框 ) 获取 用 户 输入 的 字符 串 : 





var needle = e.target.vaLue.toLowerCase(); 





如 果 搜 索 字 符 串 为 空 〈 用 户 删除 了 输入 的 内 容 ) ， 函 数 会 把 state 修改 为 缓存 中 的 原始 数据 : 


if (!needle) { 
this.setState({data: this._preSearchData}); 
return; 


} 
如 果 搜 索 字 符 串 非 空 ， 则 过 滤 原 始 数 据 ， 并 把 过 滤 结 果 作为 data 的 新 state: 








var idx = e.target.dataset.idx; 
var searchdata = this._preSearchData.filter(function(row) { 
return row[idx].toString().toLowerCase().indexOf(needle) > -1; 


}); 
this.setState({data: searchdata}); 


至 此 ， 搜 索 功能 已 经 完成 了 。 要 实现 该 功能 ， 你 只 需要 : 


。 增加 搜索 界面 ， 

。 根据 需要 显示 /隐藏 新 界面 内 容 ， 

。 实际 “业务 逻辑 ”， 即 一 个 简单 的 数组 Filter () 方法 调用 。 

原本 的 表格 泻 染 逻辑 并 不 需要 改变 。 和 往常 一 样 ， 你 只 需要 关心 数据 的 状态 ， 不管 数 据 
状态 如 何 改 变 ， 都 只 需要 把 演 染 过 程 (以 及 所 有 繁杂 的 DOM 操作 ) 交 给 React 实现 就 
可 以 了 。 























3.8.3 ”如何 改进 搜索 功能 

这 仅仅 是 一 个 用 作 演 示 的 简单 例子 。 不 妨 思 考 一 下 : 如 何 改进 搜索 功能 ? 

切换 搜索 按钮 的 标签 文字 是 一 项 可 改进 的 工作 。 比 如 当 搜 索 功 能 打开 时 (this.state. 
search === true)， 提 示 用 户 “ 搜 索 完 成 ”。 


另 一 项 可 以 尝试 的 工作 是 使 用 多 个 搜索 框 实现 多 重 搜索 ， 也 就 是 租 选 已 经 筛选 过 的 数据 。 
如 果 用 户 在 语言 一 栏 键入 Eng， 然 后 在 另 一 个 搜索 框 中 输入 内 容 ， 为 何不 能 只 在 之 前 的 搜 
索 结 果 之 上 继续 搜索 呢 ? 你 会 如 何 实现 这 个 功能 ? 
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3.9 即时 回放 


如 你 所 见 ， 组 件 会 关心 自身 的 state, JFE React 选择 适当 的 时 机 进行 泻 染 和 重新 泻 染 。 这 
意味 着 ， 在 给 定 相同 数据 (state 和 props) 的 情况 下 ， 无 论 这 个 特定 数据 状态 的 前 后 发 生 
了 什么 改变 ， 应 用 看 起 来 都 应 该 是 完全 一 样 的 。 这 个 特性 使 得 你 可 以 重 现 一 些 外 界 出 现 的 
问题 并 进行 调试 。 








假设 用 户 在 使 用 你 的 应 用 时 遇 到 问题 ， 他 们 只 需要 点 击 一 个 按钮 就 能 完成 问题 上 报 ， 而 无 
需 解释 当时 发 生 的 事情 。 这 份 问题 报告 只 需要 把 this.state Fl this.props 发 回 给 你 ， 你 
就 可 以 重 现实 际 对 应 的 应 用 状态 ， 并 看 到 视觉 效果 。 




















React 会 通过 同一 个 state 和 props 泻 染 出 同一 份 应 用 界面 。 基 于 这 个 事实 ， 我 们 还 可 以 开发 
出 “撤销 ”功能 。 实 际 上 ， 这 个 功能 的 实现 非常 简单 :只 需要 还 原 之 前 的 state 就 可 以 了 。 

有 了 这 个 想法 ， 让 我 们 更 进一步 ， 做 点 更 好 玩 的 事情 。 每 当 Excel 组 件 的 state 发 生 改变 
时 ， 我 们 都 把 state 记录 下 来 ， 并 进行 回放 。i state 在 你 面前 一 一 回放 出 来 将 会 非常 有 趣 。 




















从 实现 上 看 ， 我 们 不 关注 改变 是 何 时 发 生 的 ， 只 需要 每 隔 一 秒 种 “回放 ”一 次 应 用 的 更 
改 。 要 实现 该 功能 ， 我 们 添加 一 个 _logSetState() 方法 ， 搜 索 原 有 的 setState() 调用 并 全 
部 替换 为 这 个 新 方法 。 





此 ， 所 有 的 this.setState(newSate); 都 会 变 为 this._logSetState(newState);。 
_logSetState 方法 需要 完成 两 件 事 情 : 记录 新 的 state， 并 把 state 传递 到 setState() 方法 
中 。 这 里 提供 一 个 示例 实现 ， 对 state 进行 深 复制 ， 并 添加 到 this._log 数组 中 : 

















var Excel = React.createClass({ 
_log: [], 
_logSetState: function(newState) { 


// 克隆 一 份 原来 的 state 并 记录 下 来 
this._log.push(JSON. parse(JSON.stringify( 


this._log.length === 0 ? this.state : newState 
))); 
this.setState(newState); 
}， 
IE OE 
]); 


所 有 state 都 被 记录 下 来 后 ， 还 需要 一 个 回放 state 的 功能 。 要 触发 回放 ， 我 们 可 以 简单 地 
添加 一 个 事件 监听 器 ， 捕 捉 键 盘 行 为 并 调用 _replay() 函数 : 




















componentDidMount: function() { 
document.onkeydown = function(e) { 
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if (e.altKey && e.shiftKey && e.keyCode === 82) { // ALT+SHIFT+R(eplay) 
this._replay(); 


} 
}.bind(this); 
}, 
最 后 ， 我 们 实现 ee es 它 使 用 setInterval() 方法 ， 每 隔 一 秒 钟 从 记录 数组 中 
读 取 一 个 state 对 象 ， 并 传递 给 setState() : 
_replay: function() { 
if (this._log.length === 0) { 
console.warn('No state to replay yet'); 


return; 


} 
var idx = -1; 
var interval = setInterval(function() { 
idx++; 
if (idx === this._log.length - 1) { // 结束 
clearInterval(interval); 


this.setState(this._log[idx]); 


}.bind(this), 1000); 
}, 


3.9.1 如 何 改进 回放 功能 
撤销 / 重 做 的 功能 如 何 实现 ? 例如 ， 用 户 按 下 ALT+Z 的 按键 组 合 时 ， 将 state 记录 后 退 一 
步 ， 按 下 ALT+SHIFT+Z 时 则 前 进一步 。 


3.9.2 ”有 另 一 种 实现 方法 吗 
如 果 不 改 变 setState() 调用 ， 还 有 设 有 另 一 种 方法 可 以 实现 类 似 于 回放 /撤销 的 功能 ? 也 
许 使 用 一 个 合适 的 生命 周期 方法 (参见 第 2 章 ) 可 以 帮 有 到 你 ? 


3.10 T 
实现 了 排序 、 编 辑 、 搜 索 功能 以 后 ， 用 户 终于 能 够 获得 想 要 的 数据 了 。 如 果 随 后 可 以 让 用 
S 


幸运 的 是 ， 没 有 什么 能 难 倒 React。 你 只 需要 取得 当前 数据 this.state.data 并 以 JSON 或 
者 CSV 格式 输出 就 可 以 了 。 

































































图 3-13 显示 了 当 用 户 点 击 Export CSV 后 ， 下 载 一 个 名 为 data.csv 的 文件 (留意 浏览 器 窗 
口 的 左下 角 ) ， 然 后 在 Microsoft Excel 中 打开 这 个 表格 的 最 终结 果 ， 
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Export JSON Export CSV 








0009 






The Lord of the Rings 





Book Author Language Published Sales 


AHSHA 6 Be So: 了 处" 








Le Petit Prince (The Little Prince == = 
















Harry Potter and the Philosophet 


Edit Font 








< rly am (Body) 





And Then There Were None 





ol f Home | Layout | Tables | Charts | SmartArt | Formulas Data 


Alignment 














Paste 


Þe kllsa S =m aber i 
rA He 


M E 








Dream of the Red Chamber 











fx| The Lord of the Rings 














The Hobbit 














B G 
LJ. R. R. Tolkien English 
Le Petit Prince (The Little Pi Antoine de Saint-Exul French 
Harry Potter and the Philos J. K. Rowling English 
And Then There Were Noni Agatha Christie English 
Dream of the Red Chamber Cao Xueqin Chinese 
The Hobbit J. R. R. Tolkien English 
She: A History of Adventure H. Rider Haggard English 








She: A History of Adventure 





aa data.csv 之 








D E 
1954-1955 150 million 
1943 140 million 
1997 107 million 
1939 100 million 
1754-1791 | 100 million 
1937 100 million 
1887 100 million 








3-13: DA CSV 格式 输出 表格 数据 到 Microsoft Excel 


首先 要 在 工具 栏 添加 一 个 新 的 选项 。 我 们 使 用 HTMLS 的 特性 ， 在 用 户 点 击 <a> 标签 时 触 
发 文件 下 载 。 因 此 ， 这 两 个 新 的 “按钮 ”其 实 只 不 过 是 用 CSS 修饰 的 链接 而 已 : 








_renderToolbar: function() { 
return React.DOM.div({className: 'toolbar'}, 
React.DOM.button({ 
onClick: this._toggleSearch 
}, 'Search'), 
React.DOM.a({ 
onClick: this._download.bind(this, 'json'), 
href: 'data.json' 
}, 'Export JSON'), 
React.DOM.a({ 
onClick: this._download.bind(this, 'csv'), 
href: 'data.csv' 
}, ‘Export CSV') 
); 
}, 


现在 实现 _download() 函数 。 输 出 Do 但 输出 CSV 格式 需要 一 些 额 外 步 
又 。 从 本 质 上 讲 ， 只 需要 对 所 有 行 和 每 一 行 中 的 所 有 单元 格 进行 循环 ， 并 拼接 成 一 个 长 字 











符 串 即 可 。 一 旦 这 项 工作 完成 ， 国 数 就 会 通过 download 属性 和 window. URL 创建 的 href 二 
进 制 blob 来 初始 化 下 载 功能 : 


_download: function(format, ev) { 
var contents = format === 'json' 
? JSON. stringify(this.state.data) 
: this.state.data.reduce(function(result, row) { 
return result 
+ row.reduce(function(rowresult, cell, idx) { 
return rowresult 


+ 
+ cell.replace(/"/g, '""') 
hom 
+ (idx < row.length - 1? ',' : ''); 
}, ty 
+ "\n"s 


Lee 


var URL = window.URL || window.webkitURL; 

var blob = new Blob([contents], {type: 'text/' + format}); 
ev.target.href = URL.createObjectURL(blob) ; 
ev.target.download = 'data.' + format; 


} 
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在 本 书 前 面 的 章节 中 ， 你 已 经 学 会 了 如 何 通 过 render() 方法 定义 用 户 界面 ， 以 及 如 何 调用 
React.createElement() 方法 和 React.DOM.* 国 数 家 族 (比如 React.DOM.span())。 这 种 写法 
有 点 麻烦 ， 因 为 过 多 的 函数 调用 会 导致 圆 括 号 和 花 括号 的 闭合 难以 跟踪 。 接 下 来 介绍 一 种 








更 便捷 的 写法 : JSX。 





JSX 是 一 项 独立 于 React 上 且 完 全 可 选 的 技术 。 如 你 所 见 ， 前 相 








| 三 章 甚 至 没有 使 用 过 ISX. 








当然 ， 你 可 以 选择 不 使 用 JSX。 不 过 一 旦 尝试 使 用 这 项 技术 ， 你 就 很 可 能 不 会 回 到 之 前 的 


国 数 调用 方法 了 。 


JSX 的 具体 意义 很 难说 请， 但 通常 可 以 理解 为 JavaScriptXML 或 者 JavaScript 








Syntax eXtension (JavaScript 语法 扩展 ) 的 缩写 。JSX 开源 项 目的 官网 地 址 


是 http://facebook.github.io/jsx/. 


4.1 Hello JSX 
首先 回顾 第 1 章 的 Hello World 示例 代码 : 


<script src="react/build/react.js"></script> 
<script src="react/build/react-dom.js"></script> 
<script> 
ReactDOM. render( 
React.DOM.h1( 
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{id: "my-heading"}, 
React.DOM.span(null, 
React.DOM.em(null, "Hell"), 
"o" 
)， 
" world!" 
)， 
document.getElLementById('app') 
) ; 


</script> 
这 个 render() 函数 包含 好 几 个 函数 调用 。 我 们 不 妨 使 用 JSX 简化 这 段 代码 : 


ReactDOM. render( 

<h1 id="my-heading"> 
<span><em>Hell</em>0</span> world! 

</h1>， 

document .getELementById('app ') 

)3 


这 里 的 语法 和 你 所 熟知 的 HIML 非常 相似 。 唯 一 要 注意 的 地 方 是 ， 这 不 是 有 效 的 
JavaScript 语法 ， 因 此 不 能 在 浏览 器 中 直接 运行 。 你 需要 把 这 段 代 码 转 换 (转译 ，transpile) 
为 浏览 器 可 以 正常 运行 的 纯 JavaScript 代码 。 


4.2 转译 JSX 


转译 的 具体 过 程 需要 重 写 源 代码 ， 将 其 转换 为 老 版 本 浏览 器 中 可 以 使 用 的 语法 。 转 换 后 的 
代码 具有 和 源 代 码 相同 的 功能 。 要 注意 转译 与 polyfill 的 概念 有 所 不 同 。 





举 一 个 关于 polyfill 的 例子 ， 假 设 我 们 想 要 在 Array.prototype 中 添加 一 个 map() 方法 。 这 
个 方法 是 在 ECMAScript5 中 引入 的 ， 而 现在 我 们 要 让 它 在 最 高 支持 ECMAScript3 的 浏览 
器 中 正常 工作 : 





if (!Array.prototype.map) { 
Array.prototype.map = function() { 

// 具体 实现 

Js 

} 


// 函数 用 法 

typeof [].map === 'function'; // 返回 true,map() 方 法 现在 可 以 使 用 了 
polyfill 是 纯 JavaScript 领域 中 的 一 种 解决 方案 。 当 你 需要 为 已 存在 的 对 象 添 加 新 方法 或 者 
实现 新 的 对 象 (比如 ISON) 时 ，polyfill 是 一 种 不 错 的 选择 。 但 是 当 这 门 语 言 引 入 新 语法 
时 ，polyfill 就 不 足以 帮 有 我 们 解决 问题 了 。 比 如 ， 在 不 支持 class 的 浏览 器 中 ， 新 的 class 
关键 字 是 一 种 无 效 的 语法 ， 浏 览 器 遇 到 它 只 能 抛 出 解析 异常 。 在 这 种 情况 下 没有 办 法 进行 
polyfll。 因 此 需要 在 把 代码 提供 给 训 览 器 使 用 之 前 ， 多 加 一 个 编译 (转译 ) 新 语法 的 步骤 ， 
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以 将 其 转换 为 浏览 器 可 以 正常 解析 的 代码 。 


转译 JavaScript 正 变 得 越 来 越 普遍 ， 因 为 程序 员 希 望 现 在 就 能 使 用 ECMAScript6 (B 
ECMAScript2015) 及 以 后 的 新 特性 ， 而 无 需 等 到 浏览 器 支持 这 些 特 性 。 如 果 你 已 经 设置 了 
一 套 构建 流程 (比如 进行 代码 压缩 ， 或 者 从 ECMAScript6 到 ECMAScript5 的 转译 操作 )， 
那么 只 需要 简单 地 添加 JSX 转换 的 步 又 就 可 以 了 。 假 设 你 还 不 了 解构 建 ， 接 下 来 我 们 会 简 
单 介绍 一 些 客户 端 构建 的 流程 。 


























4.3 Babel 


Babel (原名 6to5) 是 一 个 开源 的 转译 工具 ， 支 持 转译 最 新 的 JavaScript 特性 ， 也 支持 转 
译 JSX。 它 是 你 使 用 JSX 的 前 提 。 在 下 一 章 中 ， 你 将 了 解 如 何 设置 一 个 用 于 生产 环境 的 构 
建 流程 ， 让 你 可 以 把 React 应 用 发 布 到 生产 环境 。 在 本 章 中 ， 我 们 只 对 Babel 作 简 要 介绍 ， 
并 在 客户 端 完成 转译 操作 。 








强制 性 警告 客户 端 转换 仅 用 作 原 型 展示 、 教 育 或 探索 目的 。 出 于 性 能 考 
虑 ， 请 勿 在 实际 应 用 中 使 用 该 方式 进行 代码 转换 。 








要 在 浏览 器 中 ( 即 客户 端 ) 进行 转换 ， 你 需要 用 到 browser.js 文件 。Babel 从 版 本 6 开始 就 
不 再 提供 这 个 文件 了 ， 但 你 依然 可 以 从 旧版 本 中 找到 它 ， 

$ mkdir ~/reactbook/babel 

$ cd ~/reactbook/babel 


$ curl https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js > 
browser.js 


在 0.14 版 本 之 前 ，React 提供 了 一 个 客户 端 JSX 转换 工具 。NPM 包 react- 
tools 也 提供 了 一 个 称 为 jsx 的 命令 行 工具 用 于 转换 。 目 前 ，Babel 已 经 取代 
了 这 些 工 具 的 作用 。 














4.4 客户 端 


要 让 页 面 中 的 ISX 代码 正常 运行 ， 你 需要 完成 两 项 工作 : 














。 引入 browser.js， 这 个 脚本 能 转译 ISX 代码 ; 
。 在 使 用 JSX 的 <script> 标签 中 标明 type 属性 ， 告 诉 Babel 转换 这 段 代码 。 


目前 ， 在 本 书 的 所 有 例子 中 ，3 引 入 React 库 的 方式 都 是 这 样 的 : 
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<script src="react/build/react.js"></script> 
<script src="react/build/react-dom.js"></script> 


现在 你 还 需要 额外 引入 转换 工具 : 


<script src="react/build/react.js"></script> 
<script src="react/build/react-dom.js"></script> 
<script src="babel/browser.js"></script> 


第 二 步 是 在 <script> 标签 中 添加 type MIRITA text/babel ( 训 览 器 本 身 不 支持 
该 属性 ) ， 用 来 告诉 Babel 这 段 脚本 需要 进行 转换 。 





之 前 : 


<script> 
ReactDOM.render(/*...*/); 
</script> 


之 后 : 


<script type="text/babel"> 
ReactDOM. render(/*...*/); 
</script> 

















当 你 加 载 页 面 时 ，browser.js 文件 会 查找 所 有 包含 text/jsx 的 脚本 ， 并 把 其 中 的 内 容 转 换 
为 浏览 器 支持 的 代码 。 图 4-1 显示 了 当 你 试图 在 Chrome 中 执行 一 段 ISX 脚本 时 发 生 的 情 
况 。 正 如 预料 的 那样 ， 浏 览 器 会 提示 语法 错误 。 在 图 4-2 中 ， 引 入 browserjs 并 转译 带 有 
text/babel 的 脚本 块 后 ， 页 面 正 常 工作 。 











oS 















































RO Elements Console Sources Network Timeline Profiles Resources Audits 


<script src="react/build/react.js"></script> 
<script src=" react/build/react-dom. js"></script> 
<!--script src="babel/browser.js"></script--> 
v <script> 
// type="text/babel"> 
ReactDOM. render ( 
<h1 id="my-heading"> 
<span><em>Hell</em>o</span> world! 
</h1>, 
document. getElementById('app') 
); 





</scrint> 


Console Emulation Rendering 





© Y <top frame> v Preserve log 


Filter ~) Regex ( ) Hide network messages @ Errors Warnings Info Logs 


© Uncaught SyntaxError: Unexpected token < 
> 


B 4-1: 浏览 器 不 能 识别 JSX 语法 














JSX | 65 





Hello world! 





R 0 Elements Console Sources Network Timeline Profiles Resources Audits 
><div 1d="app™>..</div> 
<script src="react/build/react.js"></script> 
<script src="react/build/react-dom. js"></script> 
<script src="babel/browser.js"></script> 
v <script type="text/babel"> 
ReactDOM. render ( 
<h1 id="my-heading"> 
<span><em>Hell</em>0</span> world! 
</h1>, 
document.getElementById('app') 
); 





</script> 





Console Emulation Rendering 


© Y <top frame> v Preserve log 


[Fi ter “Regex |) Hide network messages @ Errors Warnings Info Logs 











4-2; Babel 的 浏览 器 端 脚本 和 类 型 为 text/babel 的 脚本 


4.5 关于 JSX 转换 


如 果 你 想 尝试 并 进一步 熟悉 JSX 转换 ， 可 以 使 用 如 图 4-3 所 示 的 在 线 编 辑 器 (https:// 
babeljs.io/repl/) 进行 体验 。 








€ =œ C [5 https://babelijs.io/rep!/ 


PAPEL Learn ES2015 Setup Plugins Usage ~ 





@ Experimental @ Loose mode @ High compliancy ¥ Evaluate 





ReactDOM. render ( 

<h1 id=""my—heading"> 
<span><em>Hell</em>o</span> world! 

</h1>, 

document. getElementById('‘app') 

); 


OuUBRWNPR 
COWANDUBRWNPR 











4-3: 在 线 JSX 转换 工具 





如 图 4-4 Pras, ISX 转换 是 轻 量 级 且 简 单 的 : ISX 版 本 的 “Hello World” 源 代码 被 转换 
为 一 系列 React.createElement() 调用 。 这 和 你 之 前 熟知 的 函数 语法 相同 。 转 换 结果 为 纯 
JavaScript 代码 ， 因 此 易于 阅读 与 理解 。 


PAPEL 






































@ Experimental @ Loose mode [ High compliancy ¥ Evaluate 
1 ReactDOM. render( 1 “use strict"; 
2 <h1 id="my-heading"> 2 
3 <span><em>Hell</em>o</span> world! 3  ReactDOM. render(React.createElement ( 
4 </h1>， 4 nhin, 
S document .getElementById('app') 5 { id: "my-heading" }, 
Gc BE 6 React. createElement ( 
7 "span", 
8 null, 
9 React. createElement ( 
10 "em", 
11 r š 
12 "Hell" 
13 Jy 
14 ag” 
15 Xa 
16 " world!" 


17 ), document.getElementById('app')); 











4-4, 转换 后 的 Hello World 


如 果 你 在 学 习 JSX 或 者 想 把 一 份 现 有 的 HTML 代码 转 为 JSX 语法 ， 还 有 另 一 个 在 线 工 具 
可 以 帮助 你 : HTML-to-JSX 转换 器 (https://facebook.github.io/react/html-jsx.html), 41 KI 
4-5 所 示 。 











€ | Q hittps:/facebook.github.io/react/htmi-jsx.html Œ | Q Search ALAO 


React Docs Support Download Blog GitHub React Native 





HTML to JSX Compiler 


加 Create class: Class name:Helo 


Live HTML Editor 
<!-- Hello world --> var Hello = React.createClass({ 
<div class="awesome" style="border: 1px solid red"> render: function() { 





<label for= 





>Enter your name: </label> return ( 








ut type="text" id="name" /> <div> 
</div> {/* Hello world */} 
<p>Enter your HTML here</p> <div style={{border: ‘1px solid red'}} className="awesome"> 
<label htmtroi e">Enter your name: </Label> 
<input type="text" id="name" /> 
</div> 
<p>Enter your HTML here</p> 


</div> 

); 
} 
H; 











4-5; HTML-to-JSX 转换 工具 
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4.6 在 JSX 中 使 用 JavaScript 


在 构建 界面 时 经 常会 使 用 变量 、 条 件 判断 和 循环 。JSX 允许 你 在 标记 语言 中 使 用 JavaScript 
语法 ， 因 此 不 必 引 入 额外 的 模板 语法 。 在 使 用 时 ， 只 需要 在 JavaScript 代码 外 部 包 囊 一 层 
花 括号 就 可 以 了 。 





























以 上 一 章 Excel 组 件 中 的 一 段 代码 为 例 。 要 把 函数 语法 转换 为 JSX， 可 以 这 样 做 : 





var Excel = React.createClass({ 
/* 省 略 部 分 代码 */ 


render: function() { 
var state = this.state; 


return ( 
<table> 
<thead onClick={this._sort}> 
<tr> 
{this.props.headers.map(function(title, idx) { 
if (state.sortby === idx) { 
title += state.descending ? ' \u2191' : ' \u2193'; 
} 
return <th key={idx}>{title}</th>; 
})} 
</tr> 
</thead> 
<tbody> 
{state.data.map(function(row, idx) { 
return ( 
<tr key={idx}> 
{row.map(function(cell, idx) { 
return <td key={idx}>{cell}</td>; 
})} 
</tr> 
J; 
})} 
</tbody> 
</table> 
); 
} 
p; 





ARAIL, EENEN, Tie SE TES es LETS : 





<th key={idx}>{title}</th> 


POR, ae Be ETS LE map() 调用 : 





<tr key={idx}> 
{row.map(function(cell, idx) { 
return <td key={idx}>{cell}</td>; 
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})} 
</tr> 


你 还 可 以 在 JSX AY JavaScript HARARE ISX, WERE TOR ASEM. POE 
ISX 看 作 JavaScript (经 过 轻 量 的 转换 后 ) 加 上 熟悉 的 HTML 语法 。 现 在 你 可 以 让 团队 中 
那些 不 精通 JavaScript 但 了 解 过 HTML 的 成 员 尝 试 编写 JSX 了 。 只 需要 让 他 们 学 习 一 些 





JavaScript 基础 知识 ， 包 括 变量 、 循 环 等 ， 就 可 以 使 用 实际 数据 构建 界面 了 。 








的 条 件 判断 ， 但 我 们 可 以 使 用 三 元 表达 式 加 上 代码 格式 化 来 提高 代码 的 可 读 性 : 


return ( 
<th key={idx}>{ 
state.sortby === idx 
? state.descending 
? title + ' \u2191' 
: title + ' \u2193' 
: title 
}</th> 
); 





注意 到 上 述 例 子 中 重复 出 现 的 title 了 吗 ? 你 可 以 对 代码 进行 简化 : 


return ( 
<th key={idx}>{title}{ 
state.sortby === idx 
? state.descending 
? ' \u2191! 
: ' \u2193' 
: null 
}</th> 
3 
然而 在 这 种 情况 下 ， 你 还 需要 修改 排序 函数 。 这 是 因为 之 前 的 排序 函数 假设 
用 户 点 击 了 <th 标签 ， 并 通过 cellindex 属性 确定 用 户 点 击 了 哪 一 个 <th>, 
但 当 你 在 ISX 中 使 用 相 邻 的 花 括号 块 时 ，JSX 会 使 用 <span> 标签 把 两 个 花 
括号 中 的 内 容 分 离开 。 换 句 话说， 将 <th>{1}{2}</th> 转换 为 DOM 结构 的 


结果 是 <th><span>1</span><span>2</span></th>, 


4.7 在 JSX 中 使 用 空格 


在 JSX 中 使 用 空格 的 方法 和 HTML 类 似 ， 但 又 略 有 不 同 。 举 个 例子 









































<h1> 
{1} plus {2} is {3} 
</h1> 
得 到 的 结果 为 : 


在 刚才 Excel 组 件 例子 的 map() 回调 函数 中 ,使 用 了 一 个 话 条 件 判断 。 尽 管 这 是 一 个 租 套 
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<h1> 
<span>1</span><span> plus </span><span>2</span><span> is  </span><span>3</span> 
</h1> 


实际 的 泻 染 内 容 为 1 plus 2 is 3， 这 与 使 用 HTML 时 的 泻 染 结果 相同 : 多 个 空格 会 合并 为 
一 个 
No 


然而 ， 在 这 个 例子 中 : 


<h1> 
{1} 
plus 
{2} 
is 
{3} 

</h1> 

















最 终 得 到 的 结果 为 : 


<h1> 
<span>1</span><span>pLus</span><span>2</span><span>is</span><span>3</span> 
</h1> 

















如 你 所 见 ， 所 有 空格 都 被 去 除了 ， 输 出 结果 是 1plus2is3。 








MERIME '} (这 样 会 产生 更 多 <span> 标签 ) 或 者 把 字符 串 变 为 带 空 格 的 表达 式 ， 可 以 
保证 空格 总 是 被 添加 。 换 名 话说 ， 下 列 两 种 方法 都 是 可 行 的 : 








<h1> 
{/* 空格 表达 式 */} 


{ '}plus{' '} 


<h1> 
{/* 把 空格 放 在 字符 串 表 达 式 中 */} 
{1} 





{' plus '} 
{2} 
Cus: hy, 
{3} 

</h1> 


4.8 在 JSX 中 使 用 注释 


在 前 面 这 个 例子 中 ， 悄 悄 地 使 用 了 一 个 新 概念 : 在 JSX 标记 中 添加 注释 。 

















由 于 使 用 0 包 龙 起 来 的 内 容 仅仅 是 JavaScript， 你 可 以 通过 /* 注释 内 容 */ 的 形式 添加 
多 行 注释 。 你 还 可 以 使 用 // 注释 内 容 添加 单行 注释 ， 但 要 注意 确保 在 表达 式 中 的 右 花 括 
号 } 需要 另 起 一 行 ， 否 则 } 就 会 成 为 注释 的 一 部 分 : 




















<h1> 
{/* 多 行 注 释 */} 
{/* 


多 
行 
注 
释 
*/} 
{ 
// 单行 注释 





Hello 
</h1> 


由 于 单行 注释 {// 注释 } 不 能 正常 工作 ( 右 花 括号 } 会 被 注释 掉 ) ， 使 用 单行 注释 并 没有 
什么 优势 。 出 于 注释 风格 一 致 性 的 考虑 ， 建 议 在 任何 情况 下 都 使 用 多 行 注释 。 














4.9 HTML 实体 
在 JSX 中 可 以 使 用 HTML 实体 ， 就 像 这 样 : 








<h2> 
More info &raquo; 
</h2> 


这 个 例子 输出 一 个 右 指 双 尖 引号 ， 如 图 4-6 所 示 : 








More info > 





4-6: 在 JSX 中 使 用 HTML 实体 


然而 ， 如 果 你 在 表达 式 中 使 用 了 HTML 实体， 会 遇 到 双重 编码 的 问题 。 比 如 在 下 面 这 个 例 
子 中 HTML 内 容 会 被 编码 ， 结 果 如 图 4-7 所 示 : 























<h2> 
{"More info &raquo;"} 
</h2> 
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More info &raquo; 








4-7: 双重 编码 的 HTML 实体 


为 了 避免 双重 编码 的 情况 ， 可 以 使 用 Unicode 版 本 的 HTML 实体 作为 代替 。 在 这 个 例子 中 ， 
右 指 双 尖 引 号 对 应 的 编码 是 \u09bb (编码 表 参 见 http://dev.w3.org/html5/html-author/charref) : 








<h2> 
{"More info \u0@bb"} 
</h2> 





出 于 方便 起 见 ， 你 可 以 在 模块 顶部 定义 一 个 对 应 该 编码 的 常量 。 在 这 里 ， 我 们 在 符号 前 面 
再 添加 一 个 空格 : 


const RAQUO = ' \u00bb'; 


然后 你 就 可 以 在 任何 地 方 通过 常量 使 用 这 个 符号 了 : 


<h2> 
{"More info" + RAQUO} 
</h2> 
<h2> 
{"More info"}{RAQUO} 
</h2> 
注意 到 这 里 使 用 新 的 const 关键 字 代替 了 var 关键 字 吗 ? 借助 Babel， 你 就 
可 以 使 用 JavaScript 提供 的 所 有 最 新 特性 了 。 关 于 Babel 的 具体 内 容 将 在 第 5 
章 介绍 。 
防范 XSS 攻击 


你 可 能 会 疑惑 : 为 什么 要 这 样 和 给 费 周 折 地 使 用 HTML 实体 ?一 个 非常 重要 的 目的 是 防范 
XSS 攻击 。 

为 了 防范 XSS Be, React 会 对 所 有 字符 串 进行 转 义 。 当 你 向 用 户 请 求 输入 某 些 内 容 而 用 
户 提 供 了 一 串 恶意 的 字符 串 时 ，React 可 以 保护 你 免 受 攻击 。 以 这 种 用 户 输 入 为 例 : 





var firstname = 'John<scr'+'ipt src="http://evil/co.js"></scr'+'ipt>'; 


在 某 些 情况 下 ， 你 可 能 需要 把 这 串 字 符 插入 DOM 节点 。 比 如 这 样 : 
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document.write(firstname) ; 








然后 灾难 发 生 了 。 页 面 输出 的 内 容 为 John， 但 随后 的 <script> 标签 却 加 载 了 一 段 恶意 
JavaScript 脚本 ， 对 你 的 应 用 和 那些 信任 你 的 用 户 造 成 了 安全 危害 。 



































发 生 这 种 情况 时 ，React 可 以 很 好 地 保护 你 的 应 用 。 如 果 你 这 样 写 : 


React.render( 
<h2> 

Hello {firstname}! 
</h2>, 
document.getELementById('app') 
)3 


React 将 会 对 firstname 的 内 容 进行 转 义 〈 如 图 4-8 所 示 )。 








Hello John<script src="http://evil/co.js"></script>! 











4-8: 转 义 字符 串 


4.10 展开 属性 


JSX 向 ECMAScript6 借鉴 了 一 项 实用 的 特性 ， 称 为 展开 运算 符 (spread operator) 。 当 你 定 
义 属性 时 ， 可 以 使 用 这 种 便捷 的 方法 。 














假设 你 需要 把 一 系列 属性 传递 给 <a> 标签 组 件 : 





var attr = { 

href: 'http://example.org', 
target: '_blank', 

J; 


你 当然 可 以 这 样 写 : 





return ( 
<a 
href={attr. href} 
target={attr.target}> 
Hello 
</a> 


J; 
但 是 这 种 写法 过 于 元 余 。 使 用 展开 运算 符 ， 只 需 一 行 代码 即 可 完成 相同 的 功能 : 

















return <a {...attr}>Hello</a>; 
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在 这 个 例子 中 ， 你 〈 可 能 根据 某 些 特定 条 件 ) 提前 定义 了 一 个 属性 对 象 。 这 通常 是 
用 该 组 件 时 的 情况 ， 但 更 常见 的 使 用 场景 是 ， 从 组 件 外 部 取得 这 个 对 象 属 性 一 一 通常 
父 组 件 传递 过 来 的 属性 。 接 下 来 我 们 就 来 看 看 这 种 情况 。 











在 父子 组 件 之 间 使 用 展开 属性 

假设 你 正在 构建 一 个 FancyLink 组 件 ， 其 内 部 使 用 的 是 常规 的 <a> 标签 实现 。 你 希望 组 件 
可 以 接收 所 有 <a> 标签 可 接收 的 属性 (包括 href, style, target 等 ) 以 及 一 些 额外 的 属 
性 (比如 size)。 然 后 其 他 用 户 可 以 这 样 使 用 你 的 组 件 : 

















<FancyLink 
href="http://example.org" 
style={ {color: "red"} } 
target="_blank" 
size="medium"> 
Hello 

</FancyLink> 








这 时 ， 你 的 render() 函数 应 该 如 何 利用 展开 属性 的 优势 ， 避 人 免 重 新 定义 <a> 标签 的 所 有 属 
性 呢 ? 


var FancyLink = React.createClass({ 
render: function() { 
switch(this.props.size) { 


// 基于 size 属 性 进行 一 些 处 理 











return <a {...this.props}>{this.props.children}</a>; 
} 
]); 


注意 到 this.props.children 的 使 用 了 吗 ? 这 是 一 个 简单 方便 的 方法 ， 允 许 
你 传递 任意 数量 的 子 节点 到 组 件 中 ， 并 通过 这 个 属性 在 组 合 界面 时 访问 其 内 


oy 


DN 
Fo 








在 前 面 这 个 代码 片段 中 ， 你 基于 size 属性 进行 了 一 些 自 定义 处 理 ， 然 后 把 所 有 属性 简单 地 
传递 给 <a> 标签 。 这 当中 也 包含 了 size 属性 。React.DOM.a 中 没有 size 的 概念 ， 因 此 会 自 
动 忽略 这 个 属性 ， 并 用 上 其 他 所 有 属性 。 








你 可 以 对 代码 进行 一 些 改进 ， 避 免 传递 不 必要 的 属性 : 


var FancyLink = React.createClass({ 
render: function() { 


switch(this.props.size) { 


// 基于 size 属 性 进行 一 些 处 理 
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} 


var attribs = Object.assign({}, this.props); // 浅 复 制 
delete attribs.size; 


return <a {...attribs}>{this.props.children}</a>; 


H); 





使 用 ECMAScript7 提议 的 语法 (和 前 面 一 样 无 需 额 外 的 工作 ，Babel 可 以 进 


行 转换 ! ) 可 以 让 代码 进一步 简化 ， 无 需 进行 对 象 复制 : 


var FancyLink = React.createClass({ 
render: function() { 





var {size, ...attribs} = this.props; 


switch (size) { 
[| 基于 size 属性 进行 一 些 处 至 
} 











nE 





return <a{...attribs}>{this.props.children}</a>; 
} 
}) 


4.11 在 JSX 中 返回 多 个 节点 








render() 函数 必须 返回 单个 顶层 结 点 ， 不 允许 返回 两 个 顶层 结 点 。 换 句 话 说 ， 以 下 代码 会 





导致 错误 : 


// 语法 错误 : 
// 相 邻 的 JSX 元 素 必 须 包 于 在 一 个 闲 合 标签 中 


var Example = React.createClass({ 
render: function() { 

return ( 
<span> 

Hello 

</span> 
<span> 

World 

</span> 


)3 
} 
}) 
PARA BARR, REEMA LEE TE PB ay, Ean <div>: 
var Example = React.createClass({ 


render: function() { 
return ( 
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<div> 
<span> 
Hello 
</span> 
<span> 
World 
</span> 
</div> 
); 
} 
}); 


虽然 不 能 在 render 方法 中 返回 一 个 结 点 数组 ， 但 是 可 以 在 变量 中 使 用 数组 ， 只 需要 给 数组 
中 的 结 点 添加 合适 的 key 属性 即 可 : 











var Example = React.createClass({ 
render: function() { 


var greeting = [ 
<span key="greet">Hello</span>, 


a 
3 


<span key="world">World</span>, 


yt 


l; 


return ( 
<div> 
{greeting} 
</div> 
); 
} 
J); 


值得 注意 的 是 ， 你 还 可 以 在 数组 中 混入 空格 与 其 他 字符 串 ， 并 且 不 需要 给 它们 添加 key 
属性 。 





在 某 种 程度 上 ， 这 类 似 于 从 父 组 件 接收 任意 数量 的 参数 ， 并 通过 render() 函数 进行 传播 : 











var Example = React.createClass({ 
render: function() { 
console. log(this.props.children.length); // 4 
return ( 
<div> 
{this.props.children} 
</div> 
); 
} 
]); 


React.render( 
<Example> 
<span key="greet">Hello</span> 


ESY 
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<span key="world">World</span> 
! 
</Example>, 
document.getELementById('app') 
)3 


4.12 JSX #0 HTML 的 区 别 


ISX 带 给 你 的 感觉 应 该 是 非常 熟悉 的 ， 因 为 它 和 HTML íh 














很 类 似 ， 但 JSX 还 支持 添加 动态 


值 、 使 用 循环 与 条 件 判断 (只 需要 使 用 { eee). EA REH ISX 时， 你 可 以 使 用 


HTML-to-JSX 工具 (https://facebook.github.io/react/html-jsx.html) , 








自己 编写 JSX 了 。 接 下 来 我 们 会 介绍 HTML 和 JSX 之 间 的 一 些 区 别 ， 


感到 吃惊 。 

















4.12.1 class 和 for 属性 不 能 用 了 吗 


你 不 能 在 ISX 中 使 用 class 和 for 属性 〈 它 们 都 是 ECMAScript 中 的 保留 字 )， 





className 和 htmLFor 作为 代替 : 


// 错误 ! 
var em = <em class="important" />; 
var label = <label for="thatInput" />; 


// 正确 
var em = <em className="important" />; 
var label = <label htmlFor="thatInput" />; 





4.12.2 style 属性 值 是 一 个 对 象 
style 属性 接收 一 个 对 象 值 ， 而 不 是 用 分 号 分 隔 的 字符 囊 。 
而 不 是 使 用 破 折 号 分 隔 。 





// 错误 ! 


在 第 1 章 中 ， 我 们 已 经 讨论 过 其 中 一 部 分 区 别 了 ， 现 在 来 回顾 一 下 。 


但 相信 你 很 快 就 
初学 者 可 能 会 对 此 


St 
能 学 会 


需要 使 用 


CSS 属性 名 字 使 用 驼峰 命名 法 ， 


var em = <em style="font-size: 2em; line-height: 1.6" />; 


// 正确 

var styles = { 
fontSize: '2em', 
LlineHeight: '1.6' 

J; 


var em = <em style={styles} />; 


// 也 可 以 使 用 内 联 样式 


























A RR et ,而 内 层 





var em = <em style={ {fontSize: '2em', lineHeight: 


'1.6'} } />; 





层 则 代表 一 个 JS 对 象 
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4.12.3 闭合 标签 
在 HTML 中 ， 有 一 些 标签 不 需要 闭合 ， 但 在 ISX (XML) 中 ， 所 有 标签 都 要 闭合 : 


// 错误 ! 

// 标签 没有 闭合 ,虽然 在 HTML 中 这 样 写 是 合法 的 
var gimmeabreak = <br>; 

var list = <ul><li>item</ul>; 

var meta = <meta charset="utf-8">; 











// 正确 

var gimmeabreak = <br />; 

var list = <ul><li>item</li></ul>; 
var meta = <meta charSet="utf-8" />; 


// 正确 


var meta = <meta charSet="utf-8"></meta>; 


4.12.4 用 驼峰 法 命名 属性 

在 之 前 的 代码 片段 中 ， 你 是 否 注意 到 了 charset 和 charset 的 区 别 ? 在 JSX 中 ， 所 有 属性 
都 需要 使 用 驼峰 法 命名 。 对 于 初学 者 而 言 ， 这 经 常 造 成 混 请 你 可 能 在 代码 中 使 用 了 
onclick， 但 发 现 它 没 有 达到 预期 的 效果 ， 直 到 把 属性 名 改 为 onCLick 才能 正常 工作 : 








// 错误 ! 


var a = <a onclick="reticulateSplines()" />; 


// 正确 


var a = <a onClick={reticulateSplines} />; 


需要 注意 ， 所 有 以 data- 和 aria- 开头 的 属性 都 是 例外 ， 其 命名 方式 和 HTML 相同 。 


4.13 JSX 和 表单 


接 下 来 ， 我 们 将 介绍 在 处 理 表 单 时 ISX 和 HIML 的 一 些 区 别 。 








4.13.1 onChange 处 理 器 


在 使 用 表单 元 素 时 ， 用 户 会 与 表单 进行 交互 ， 并 改变 元 素 值 。 在 React 中 ， 你 可 以 通过 
onChange 属性 订阅 这 些 属性 发 生 的 更 改 。 该 方法 可 以 监听 单 选 按钮 和 选择 框 的 checked 属 
性 变化 ， 以 及 <select> 下 拉 框 的 selected 属性 变化 ， 此 外 还 可 以 监听 文本 框 和 <input 
type="text"> 的 输入 内 容 变化 ， onchange Meth = ASABE, 相 比 于 在 元 素 失去 焦 
点 时 才 触 发 的 onchange 原生 事件 ， 前 者 更 具 实 用 性 。 这 意味 着 ， 我 们 不 需要 为 了 监听 用 户 
输入 而 订阅 所 有 的 鼠标 事件 和 键盘 事件 了 。 






































4.13.2 value 和 defaultValue 的 区 别 




















键入 bye， 你 会 发 现 : 


i.value; // "bye" 
i.getAttribute('value'); // "hello" 





在 HTML 中 ， 如 果 你 创建 一 个 输入 框 <input id="i" value="hello" />， 然 后 在 输入 框 中 





而 在 React H, value 属性 总 是 和 文本 输入 框 的 最 新 内 容 保持 一 致 。 如 果 你 想 指定 默认 值 ， 


可 以 使 用 defaultValue 属性 。 

















绑 定 了 一 个 onChange 处 理 器 。 当 把 hello 的 最 后 一 个 字符 o Til 
而 defaultValue 的 值 仍 然 是 hello: 








function log(event) { 
console. log("value: ", event.target.value); 


在 下 面 这 个 代码 片段 中 ， 你 拥有 一 个 <input> 组 件 。 该 组 件 预先 填充 的 内 容 为 hello， 还 


pat, value 的 值 变 为 hell, 


console.log("defaultValue: ", event.target.defaultValue); 


} 
React.render( 

<input defaultValue="hello" onChange={log} />， 
document.getELementById('app') 

); 


你 应 当 把 这 种 模式 应 用 到 自 定义 组 件 中 : 如 果 你 需 





用 户 该 属性 应 该 一 直 是 最 新 的 (比如 value, data), 








请 把 属性 名 改 为 initialData (在 第 3 章 讨论 过 ) 
证 结果 符合 预期 。 





4.13.3 <textarea> 的 值 


要 接收 一 个 属性 ， 并 暗示 
就 让 其 保持 更 新 。 否 则 
或 者 defaultValue， 以 保 














为 了 和 文本 输入 框 保持 一 致 ，React 版 本 的 <textarea> 组 件 同 样 能 够 接收 value 和 


defaultValue 属性 ， 其 中 value 属性 值 保持 最 新 ， 而 default 





Value 则 和 原来 的 值 保 持 一 


致 。 如 果 你 依然 坚持 HTML 风格 ， 也 就 是 使 用 <textarea> 的 子 节点 来 定义 值 (不 推荐 这 


样 做 ) React 会 把 子 节 点 的 值 定义 为 defaultValue。 











在 HTML 中 ，<textarea> (按照 W3C 的 定义 ) 之 所 以 要 把 子 节点 作为 值 ， 是 为 了 方便 开 





发 者 在 输入 内 容 中 进行 换行 。 然 而 ， 基 于 JavaScript 的 React 不 会 受到 这 样 的 限制 。 当 你 





需要 换行 时 ， 只 需要 使 用 \n 即 可 。 
请 思考 下 面 这 个 例子 的 输出 结果 ， 答 案 如 图 4-9 所 示 : 














function log(event) { 
console. log(event.target .value); 
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console. Log(event.target.defaultValue) ; 


} 


React.render( 
<textarea defaultValue="hello\nworld" onChange={log} />, 
document.getElementById('app1') 
); 
React.render( 
<textarea defaultValue={"hello\nworld"} onChange={log} />， 
document.getElementById('app2') 
)3 
React.render( 
<textarea onChange={log}>hello 
world 
</textarea>, 
document .getElementById('app3' ) 
)3 
React. render( 
<textarea onChange={log}>{"hello\n\ 


























world"} 
</textarea>, 
document.getElLementById('app4') 
)3 
hello\nworld 
4 
hello 
world “4 
hello world 
4 
hello 
world “4 














R 0 Elements Console Sources Network Timeline Profiles Resources Audits React 





© Y  <top frame> v Preserve log 





Filter “Regex |) Hide network messages A Errors Warnings Info Logs Debug Handled 











© Warning: Use the ‘defaultValue’ or `value` props instead of setting children on <textarea>. 
© Warning: Use the ‘defaultValue’ or ‘value' props instead of setting children on <textarea>. 
> 








4-9; 在 <textarea> 中 换行 





要 注意 文本 串 "hello\nworld" 与 JavaScript FEF {"hello\nworld"} 作为 属性 值 时 的 区 别 。 


此 外 还 要 和 注意， 在 JavaScript 中 ， 多 行 字符 串 需要 使 用 \ 进行 转 义 (参见 第 4 个 例子 )。 





在 这 个 例子 的 最 后 ，React 会 在 使 用 传统 方法 设置 <textarea> 子 市 点 的 值 时 ， 在 控制 台中 
发 出 警告 。 


4.13.4 <select> 的 值 
当 你 在 HTML 中 使 用 <select> 标签 时 ， 可 以 通过 <option selected> 指定 预先 选择 的 项 ， 








比如 这 样 : 


<!-- 传统 HTML --> 
<select> 

<option value="stay">Should I stay</option> 

<option value="move" selected>or should I go</option> 
</select> 





在 React 中 ， 则 可 以 通过 value 或 者 更 好 的 defaultValue 来 给 <select> TAI EIR: 


// React/JSX 
<select defaultValue="move"> 
<option value="stay">Should I stay</option> 
<option value="move">or should I go</option> 
</select> 


这 同样 适用 于 多 重 选 择 的 情况 ， 只 需 提 供 一 个 包含 预选 择 值 的 数组 : 


<select defaultValue={["stay", "move"]} multiple={true}> 
<option value="stay">Should I stay</option> 
<option value="move">or should I go</option> 
<option value="trouble">If I stay it will be trouble</option> 
</select> 


如 果 你 把 上 述 两 种 方式 搞 混 了 ，React 会 在 你 为 zoption> 标签 设置 selected 
属性 时 给 予 警 告 提示 。 











也 可 以 使 用 <select value> 代 赫 <select defaultvalue>, 但 是 不 推荐 这 样 做 ， 因 为 这 需要 
你 手动 更 新 用 户 看 到 的 值 。 否 则 ， 当 用 户 选 择 了 一 个 不 同 的 选项 时 ，<select> 显示 的 内 容 
不 会 发 生变 化 。 换 而 言 之 ， 你 需要 进行 类 似 这 样 的 处 理 : 











var MySelect = React.createClass({ 
getInitialState: function() { 
return {value: 'move'}; 
}, 
_onChange: function(event) { 
this.setState({value: event.target.value}); 


}, 
render: function() { 
return ( 
<select value={this.state.value} onChange={this._onChange}> 
<option value="stay">Should I stay</option> 
<option value="move">or should I go</option> 
<option value="trouble">If I stay it will be trouble</option> 
</select> 
)3 
} 
}); 
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4.14 使 用 JSX 实现 Excel 组 件 


在 本 章 最 后 ， 不 妨 尝试 使 用 JSX 重 写 上 一 章 Excel 组 件 最 终 版 本 中 的 所 有 ren 
这 项 任务 是 留 给 你 的 练习 题 。 如 果 你 感 兴趣 ， 可 以 自己 完成 ， 并 把 答案 和 本 





der*() 方法 。 





中 的 示例 代码 进行 对 比 Chttps://github.com/stoyan/reactbook/) 。 


BB 附带 代码 库 
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为 应 用 开发 做 准备 





除非 出 于 原型 展示 或 测试 JSX 的 目的 ， 否 则 对 于 任何 开发 与 发 布 流程 ， 都 应 该 设置 构建 流 
程 。 如 果 你 已 经 拥有 一 套现 成 的 构建 流程 ， 只 需要 再 添加 Babel 转换 的 步骤 就 可 以 了 。 假 
设 你 还 没有 设置 任何 构建 流程 ， 我 们 将 从 头 开始 介绍 这 方面 的 内 容 。 


























我 们 的 目标 是 无 需 等 待 浏览 器 的 原生 支持 ， 就 能 在 各 种 浏览 器 上 使 用 JSX 和 JavaScript 的 新 
特性 。 因 此 ， 你 需要 在 开发 环境 中 设置 一 个 转换 步骤 ， 并 让 其 在 后 台 运行 。 这 个 转换 过 程 
生成 的 代码 应 当 尽量 接近 用 户 最 终 在 生产 环境 中 运行 的 代码 。( 这 意味 着 不 需要 再 进行 客户 
端 转换 。) 这 个 过 程 应 当 尽量 不 显眼 ， 以 避免 在 开发 和 构建 的 上 下 文 切换 中 花费 大 量 时 间 。 
当 谈 及 开发 与 构建 过 程 时 ，JavaScript 社区 和 前 端 生态 圈 已 经 提供 了 大 量 方案 可 供 选择 。 我 


们 会 把 构建 过 程 简单 化 ， 不 使 用 任何 工具 ， 而 是 自己 动手 实现 一 个 构建 过 程 。 这 样 做 的 好 
处 是 : 



















































































。 帮助 你 理解 构建 过 程 的 原理 ， 
。 让 你 在 随后 挑选 构建 工具 时 ， 可 以 作出 更 明智 的 选择 ; 
。 把 关注 点 放 在 React 本 身 ， 而 不 是 对 其 他 工具 的 讨论 上 。 


5.1 一 个 模板 应 用 


首先 ， 为 新 应 用 构建 一 个 通用 的 “模板 ”项 目 。 在 这 个 模板 项 目 中 ， 我 们 的 应 用 将 在 客户 
端 运行 ， 并 且 遵 循 单 页 面 应 用 (single-page app, SPA) 风格 。 此 外 ， 应 用 中 还 会 使 用 JSX 
和 JavaScript 语言 本 身 提供 的 许多 新 特性 ， 包 括 ESS, ES6 ( 亦 称 为 ES2015) 以 及 尚 在 提 
议 中 的 ES7 新 特性 。 
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5.1.1 文件 和 目录 

按照 常规 做 法 ， 你 可 以 建立 /css、/js 和 /images 文件 夹 用 于 存放 静态 资源 ， 然 后 通过 index. 
html 文件 把 静态 资源 关联 起 来 。 接 下 来 ， 我 们 将 /js 文件 夹 进一步 划分 为 /js/source (使 用 
JSX 语法 编写 的 脚本 ) 和 /js/build ( 源 代 码 经 过 转译 后 ， 浏 览 器 可 以 运行 的 脚本 )。 另 外 ， 
我 们 还 建立 了 /scripts 目录 ， 用 于 存放 构建 过 程 用 到 的 命令 行 脚本 。 


现在 ,模板 应 用 的 目录 结构 如 图 5-1 所 示 。 











> css 
> images 
各 index.html 
v E js 
v E build 
> |) source 
> | scripts 








5-1: 模板 应 用 








下 


。 在 整个 应 用 中 通用 的 文件 
。 与 某 个 特定 组 件 相关 的 文件 


面 进一步 划分 /css 和 /js 目录 (如 图 5-2 所 示 )， 它 们 分 别 包括 : 









































v CSS 
app.css 
y | components 
Logo.css 
> | images 
‘®) index.html 
v E js 
v |» build 
v © source 
各 app.js 
vy | components 
'®) Logo.js 
> scripts 











5-2: 组 件 的 分 离 








这 种 划分 方式 可 以 帮助 你 尽 可 能 保持 组 件 的 独立 性 、 专 用 性 和 可 重用 性 。 毕 竞 ， 你 的 目标 
是 使 用 若干 带 有 特定 功能 的 小 组 件 构建 大 型 应 用 。 这 体现 了 “分 而 治之 ”的 理念 。 








最 后 ， 我 们 将 尝试 创建 一 个 简单 的 示例 组 件 ， 并 称 之 为 <Logo> (应 用 一 般 都 拥有 标志 图 
案 )。 一 般 约 定 组 件 的 首 字母 需要 大 写 ， 因 此 这 里 要 注意 Logo F logo 的 区 别 。 为 了 让 组 件 
的 相关 文件 保持 命名 一 致 性 ， 我 们 约定 使 用 /js/source/components/Component.js 编写 组 件 逻 
辑 ， 使 用 /css/components/Component.css 编写 相关 样式 。 图 5-2 显示 了 完整 的 文件 夹 目录 结 
构 ， 其 中 包含 一 个 简单 的 <Logo> 组 件 。 


























5.1.2 index.html 


解决 了 目录 结构 的 问题 ， 接 下 来 看 看 如 何 使 用 这 个 目录 结构 编写 示例 应 用 。index.html X 
件 中 应 该 引入 如 下 内 容 : 


。 所 有 CSS 文件 打包 生成 的 单个 bundle.css 文件 ; 
。 所 有 JavaScript 文件 打包 生成 的 单个 bundle.js 文件 (包括 应 用 中 的 组 件 及 其 依赖 库 ， 比 
4n React) ; 


。 ADEE, WCE ATER at <div id="app">, 


<!DOCTYPE html> 
<html> 
<head> 
<title>App</title> 
<meta charset="utf-8"> 
<link rel="stylesheet" type="text/css" href="bundle.css"> 
</head> 
<body> 
<div id="app"></div> 
<script src="bundle.js"></script> 
</body> 
</html> 


单一 .css 和 单一 js 的 文件 组 织 形式 适用 于 大 部 分 应 用 。 但 当 你 的 应 用 规模 
接近 Facebook 和 Twitter 时 ， 初 始 化 加 载 这 些 脚本 就 会 非常 耗 时 ， 而 且 用 户 
可 能 不 需要 一 开始 就 用 到 所 有 功能 。 这 时 你 可 以 建立 一 个 脚本 / 资源 加 载 器 ， 
使 得 代码 可 以 按 需 加 载 。( 这 个 方案 将 留 给 你 思 芳 。 别 忘 了 ， 有 许多 开源 的 
解决 方案 可 供 选择 。) 在 这 种 场景 下 ， 初 始 加 载 的 单一 .css 和 js 文件 可 以 理 
解 为 一 种 引导 文件 ， 让 用 户 可 以 在 第 一 时 间 看 到 首 屏 内 容 。 因 此 ， 在 应 用 规 
模 增 长 时 ， 这 种 单一 文件 的 模式 依然 有 其 用 武之 地 。 





























你 马上 就 会 知道 如 何 把 独立 的 资源 文件 打包 为 bundle.js 和 bundle.css 文件 。 但 在 此 之 前 ， 
你 需要 了 解 每 个 CSS/JS 文件 的 作用 。 
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5.1.3 CSS 
全 局 作用 的 样式 文件 /css/app.css 包含 了 整个 应 用 的 通用 样式 ， 如 下 所 示 : 














htmL { 
background: white; 
font: 16px Arial; 
} 


除 全 局 样式 外 ， 你 还 需要 为 每 个 组 件 定义 具体 样式 。 前 面 我 们 已 经 约定 每 个 组 件 对 应 一 个 
CSS 文件 (和 一 个 JavaScript 文件 )， 放 置 在 /css/components (和 /js/source/components ) 。 
现在 我 们 来 实现 /css/components/Logo.css 文件 : 























.Logo { 
background-image: url('../../images/react-logo.svg'); 
background-size: cover; 
display: inline-block; 
height: 50px; 
vertical-align: middle; 
width: 50px; 
} 


此 处 还 遵循 了 另 一 个 实用 的 小 约定 : 在 保持 组 件 名 称 首 字母 大 写 的 同时 ， 还 要 给 组 件 的 顶 
层 元 素 设 置 和 该 组 件 名 相同 的 类 名 ， 在 这 里 对 应 为 className="Logo"。 








5.1.4 JavaScript 


应 用 的 入 口 处 是 /js/source/app.js 脚本 文件 。 入 口 文 件 是 所 有 逻辑 开始 的 地 方 ， 因 此 我 们 在 
该 文件 中 这 样 编写 : 











React.render( 
<h1> 

<Logo /> Welcome to The App! 
</h1>， 
document .getELementById('app') 
)3 


最 后 ， 在 /js/source/components/Logo.js 文件 中 ， 实 现 示例 React 组 件 <Logo> 的 逻辑 : 
var Logo = React.createClass({ 
render: function() { 
return <div className="Logo" />; 


} 
E 


5.1.5 更 现代 化 的 JavaScript 
直到 目前 ， 本 书 中 的 例子 都 只 用 到 了 一 些 简 单 的 组 件 ， 而 且 出 于 方便 起 见 ， 让 React 和 
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ReactDOM 暴露 为 全 局 变量 。 但 当 你 的 应 用 变 得 复杂 ， 且 组 件数 量 越 来 越 多 的 时 候 ， 你 就 需 
要 使 用 更 好 的 代码 组 织 形式 。 这 是 因为 暴露 全 局 变量 是 有 风险 的 (往往 会 导致 命名 冲突 )， 
一 直 依 赖 全 局 变量 也 并 不 安全 。( 试 想 把 不 同 的 JavaScript 打包 起 来 时 ， 内 容 不 是 放 在 单个 
bundle.js 中 的 情形 。) 

















你 需要 借助 模块 来 解决 这 个 问题 。 


1. 模块 化 

JavaScript 社区 已 经 提出 了 好 几 种 模块 化 方案 ， 其 中 一 种 被 广泛 接受 的 方案 是 CommonJS 。 
在 CommonJS 中 ， 假 如 你 在 一 个 文件 中 编写 了 逻辑 ， 就 可 以 导出 (export) 一 个 或 多 个 符 
号 (最 常见 的 是 对 象 ， 不 过 也 可 以 是 函数 ， 其 至 单独 的 变量 ) : 





var Logo = React.createClass({/* ... */}); 


module.exports = Logo; 


通常 约定 : 一 个 模块 只 导出 一 个 内 容 (比如 一 个 React 组 件 ) 。 





现在 这 个 模块 需要 依赖 React 以 调用 React.createClass()。 目 前 没有 定义 全 局 变量 ， 因 此 
React 不 能 通过 全 局 访问 。 你 需要 先进 行 导入 (或 者 说 是 require)， 就 像 这 样 : 








var React = require('react'); 
var Logo = React.createClass({/* ... */}); 
module.exports = Logo; 


对 于 接 下 来 开发 的 每 一 个 组 件 ， 我 们 都 将 遵循 这 个 模板 : 在 代码 顶部 声明 依赖 ， 在 底部 导 
出 内 容 ， 把 组 件 逻 辑 放 在 中 间 。 





2. ECMAScript 模块 

ECMAScript 规范 建议 延续 了 这 种 模块 化 思想 ， 并 引入 了 一 种 新 语法 (与 require() 和 
module.exports 相对 )。 你 可 以 直接 使 用 这 种 新 语法 ，Babel 会 帮 你 将 其 转译 为 浏览 器 可 以 
识别 的 旧 语 法 。 




















在 定义 其 他 模块 的 依赖 关系 时 ， 可 以 把 var React = require('react'); 改 为 import React 


from 'react';, 


在 导出 模块 内 容 时 ， 可 以 把 module.exports = Logo; 改 为 export default Logo, 











在 export 语句 的 末尾 省 略 分 号 是 符合 ECMAScript 语法 规范 的 ， 并 非 本 书 
错误 。 
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3. 类 
现在 ECMAScript 已 经 引入 了 类 的 概念 ， 因 此 可 以 使 用 新 的 语法 。 





修改 前 : 

var Logo = React.createClass({/* ... */}); 
修改 后 : 

class Logo extends React.Component {/* ... */} 


之 前 的 方法 通过 一 个 对 象 定义 React“ 类 ”， 其 语法 和 ECMAScript 2015 中 的 类 语法 有 一 些 
区 别 ， 后 者 的 用 法 如 下 。 








。 对 象 中 没有 定义 属性 ， 只 有 国 数 (方法)。 如 果 需 要 定义 属性 ， 可 以 在 构造 函数 中 通过 
this 关键 字 定义 ( 接 下 来 会 介绍 更 多 例子 和 可 选项 )。 

。 方法 通过 render() {} 定义 ， 不 需要 在 前 面 添加 function 关键 字 。 

。 方法 之 间 不 需要 像 这 样 使 用 逗号 分 隔 : var obj = {a: 1, b: 2};。 








class Logo extends React.Component { 
someMethod() { 


} // 此 处 不 需要 添加 逗号 
another() { // 此 处 不 需要 添加 function 关 键 字 
} 


render() { 
return <div className="Logo" />; 
} 
} 


4. 概括 

随 着 本 书 内 容 的 深入 ， 你 将 接触 更 多 ECMAScript 的 新 特性 ， 但 目前 介绍 的 语法 对 于 这 个 
模板 的 开发 工作 已 经 足够 了 ， 因 为 模板 的 作用 只 是 一 个 最 低 限度 的 实现 ， 目 的 是 为 新 应 用 
的 开发 建立 基础 。 





现在 模板 中 已 经 包含 了 : index.html、 全 局 CSS 样式 (app.css)、 每 个 组 件 独立 的 CSS 样式 
(/css/components/Logo.css), JavaScript 代码 的 入 口 点 (app.js) 和 按照 React 组 件 划 分 的 具 
体 模块 (比如 s/source/components/Logo.js) 











以 下 是 app.js 文件 的 最 终 版 本 : 





‘use strict'; // 总 是 使 用 严格 模式 是 一 种 好 习惯 


import React from 'react'; 





88 | 第 5 章 


import ReactDOM from 'react-dom'; 
import Logo from './components/Logo'; 


ReactDOM. render ( 
<h1> 
<Logo /> Welcome to The App! 
</h1>， 
document.getELementById('app' ) 
); 


以 下 是 Logo.js 文件 的 最 终 版 本 : 
import React from 'react'; 


class Logo extends React.Component { 
render() { 
return <div className="Logo" />; 
} 
} 


export default Logo 


你 是 否 注意 到 了 在 导入 React 库 和 导入 Logo 组 件 时 的 区 别 ? 前 者 是 from 'react' ， 而 后 者 
是 from “'./components/Logo' 。 后 者 看 起 来 像 一 个 文件 夹 路 径 ， 而 事实 也 的 确 如 此 ， 模 块 
会 从 相对 路 径 中 导入 依赖 ， 而 前 者 则 是 从 一 个 共享 目录 ( 即 通 过 opm 安装 的 模块 目录 ) 中 
导入 依赖 。 接 下 来 ， 我 们 来 看 看 怎么 让 所 有 的 工作 共同 起 作用 ， 以 及 新 语法 是 如 何在 浏览 
器 中 完美 运行 的 〈 甚 至 包括 老 版 本 E 浏览 器 )。 


你 可 以 在 本 书 附带 的 代码 库 中 找到 这 份 模板 (https://github.com/stoyan/ 
reactbook/) ， 并 在 此 基础 上 开发 你 的 应 用 。 














5.2 ”安装 必 备 工具 
要 让 index.html 打开 司 能 显示 预期 效果 ， 你 需要 预先 完成 以 下 工作 。 


。 创建 bundle.css。 这 个 文件 只 是 简单 地 拼接 CSS， 因 此 不 需要 依赖 安装 其 他 工具 。 
。 让 代码 在 浏览 器 中 可 读 。 你 需要 使 用 Babel 进行 转译 。 
。 创建 bundle.js。 我 们 使 用 Browserify 完成 这 项 工作 。 


p—s 











p—s 


Browserify 不 仅 负 责 拼 接 脚本 文件 ， 还 要 完成 以 下 任务 。 


。 解析 并 引入 所 有 的 依赖 。 你 只 需要 告诉 它 app.js 的 位 置 ， 它 就 能 找 出 所 有 的 依赖 (包括 
React, Logo.js =). 
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。 引入 一 个 CommonJS 实现 ， 以 保证 require() 调用 可 以 在 浏览 器 中 正常 工作 。Babel 会 


把 所 有 的 import 语句 转化 为 require() 函数 调用 。 


简 而 言 之 : 你 需要 事先 安装 Babel 和 Browserify。 可 以 通过 Node.js 附带 的 npm (node package 





manager，Node 包 管 理 器 ) 进行 安装 。 


5.2.1 Node.js 





要 安装 Nodejs， 请 打开 http://nodejs.org 并 根据 你 的 操作 系统 类 型 下 载 对 应 的 安装 程序 。 下 
载 完 成 后 ， 跟 随 指引 完成 安装 。 然 后 你 就 可 以 利用 npm 安装 依赖 包 了 。 


要 验证 是 否 安装 成 功 ， 可 以 在 终端 中 输入 


$ npm --version 




















如 果 你 没有 使 用 终端 (命令 提示 符 ) 的 经 验 ， 现 在 就 是 学 习 的 最 好 时 机 ! 如 果 你 使 用 Mac 
OS X， 可 以 点 击 Spotlight 搜索 (右上 角 的 放大 镜 图 标 ) 并 输入 Terminal。 如 果 你 使 用 














Windows， 找 到 开始 菜单 (右键 点 击 屏幕 左下 方 的 Windows 


powershell, 








示 符 $ 开 头 。 实 际 在 终 ， 


5.2.2 Browserify 

在 终端 中 输入 如 下 命令 ， 可 以 通过 npn 安装 Browserify : 
$ npm install --global browserify 

要 验证 是 否 安装 成 功 ， 输 入 : 


$ browserify --version 


5.2.3 Babel 


要 安装 Babel 的 命令 行 界面 (command-line interface, CLI), 
$ npm install --global babel-cli 


要 验证 是 否 安装 成 功 ， 输 入 : 





输入 : 


图 标 )， 选 择 “ 运 行 ”， 


ps 


F 输 入 





在 本 书 中 ， 为 了 区 分 终端 命令 与 常规 代码 ， 所 有 在 终端 中 输入 的 命令 都 以 提 
2 A 





$ babel --version 





发 现 规律 了 吗 ? 


通常 情况 下 ， 推 荐 在 项 目 本 地 安装 Node 包 ， 也 就 是 去 掉 上 述 例子 中 的 
--global 标记 (参见 另 一 种 模式 : global === bad?)。 在 本 地 安装 依赖 包 时 ， 
你 可 以 安装 同一 个 包 的 不 同 版 本 ， 以 满足 你 的 应 用 以 及 引入 库 的 依赖 关系 。 
但 对 于 Browserify 和 Babel 来 说 ， 在 全 局 范围 安装 能 方便 你 在 全 局 范围 〈 任 
何 一 个 目录 ) 通过 命令 行 界面 进行 访问 。 
























































5.2.4 React 相关 

最 后 还 需要 安装 几 个 React 相关 的 依赖 包 : 

。 首先 当然 是 react，; 

e react-dom， 它 是 独立 于 React 的 ; 

e babeL-preset-react， 让 Babel 支持 JSX 以 及 其 他 React 语法 ，; 
e babel-preset-es2015, 提供 了 对 新 版 本 JavaScript 特性 的 支持 。 











首先 进入 应 用 目录 (输入 cd ~/reactbook/reactbook-boiler 命令 )， 然 后 就 可 以 在 本 地 安 
装 这 些 包 了 : 


npm install --save-dev react 

npm install --save-dev react-dom 

npm install --save-dev babel-preset-react 
npm install --save-dev babel-preset-es2015 


A NNN 





接 下 来 你 会 注意 到 ， 应 用 目录 中 出 现 了 一 个 node_modules 目录 ， 其 中 包含 本 地 安装 的 包 及 
其 依赖 包 。 前 面 两 个 全 局 安装 的 模块 (Babel 和 Browserify) 则 放 在 了 另 一 个 node_modules 
目录 中 ， 其 具体 位 置 和 操作 系统 有 关 (比如 /usr/local/lib/node_modules 或 者 C:\Users{ 用 户 
名 }\AppData\Roaming\npm\). 


5.3 ”开始 构建 


构建 过 程 需要 完成 三 件 事情 : CSS 拼接 、JavaScript 转译 和 JavaScript 打包 。 这 三 个 过 程 都 
很 简单 ， 只 需 运 行 三 条 命令 即 可 。 























5.3.1 转译 JavaScript 
首先 通过 Babel 转译 JavaScript: 


$ babel --presets react,es2015 js/source -d js/build 
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这 条 命令 从 js/source 文件 夹 中 读 取 所 有 文件 ， 并 转译 其 中 的 React 和 ES2015 语法 ， 并 把 
结果 复制 到 js/build 中 。 你 会 在 命令 行 中 看 到 类 似 这 样 的 输出 结果 : 














js/source/app.js -> js/build/app.js 
js/source/components/Logo.js -> js/build/components/Logo. js 


这 个 列表 内 容 会 随 着 你 的 组 件 内 容 增多 而 增加 。 


5.3.2 ”打包 JavaScript 
接 下 来 进行 打包 : 


$ browserify js/build/app.js -o bundle.js 





你 告诉 Browserify: 应 用 入 口 为 js/build/app.js， 找 出 其 中 所 有 依赖 并 把 结果 输出 到 文件 
bundlejs 中 。 最 后 你 需要 在 index.html 的 结尾 处 引入 这 个 文件 。 要 检查 输出 文件 的 内 容 ， 
可 以 输入 less bundle.js。 





5.3.3 打包 CSS 

CSS 打包 非常 简单 〈 至 少 在 现 阶段 是 如 此 )， 你 甚至 不 需要 借助 特别 的 工具 来 完成 ， 只 需 
要 把 所 有 的 CSS 文件 拼接 成 一 个 就 可 以 了 (使 用 cat 命令 )。 可 是 ， 由 于 移动 了 文件 路 径 ， 
CSS 中 原 有 的 图 像 路 径 会 失效 ， 因 此 我 们 还 需要 使 用 sed 命令 简单 地 进行 替换 ; 

















cat css/*/* css/*.css | sed 's/..\/..\/images/images/g' > bundle.css 








有 一 些 NPM 包 可 以 帮助 你 更 好 地 完成 这 些 工 作 ， 但 目前 我 们 还 不 需要 它们 。 


5.3.4 KJER 
现在 你 已 经 完成 了 构建 过 程 ， 可 以 准备 查看 辛勤 芳 动 后 的 成 果 了 。 在 浏览 器 中 打开 index. 
html 文件 ， 你 将 会 看 见 如 图 5-3 所 示 的 欢迎 界面 。 














@ / [D App x | 


€ c |) file: rT -boiler/index.html 





Welcome to The App! 











5-3: 欢迎 使 用 应 用 


5.3.5 Windows 版 本 


上 述 命令 只 适合 在 Linux 和 Mac OS X 系统 中 使 用 。 不 过 在 Windows 系统 上 也 没有 太 大 区 
别 。 对 于 前 两 条 命令 ， 除 了 目录 分 隔 符 外 ， 其 他 地 方 都 是 相同 的 : 





$ babel --presets react,es2015 js\source -d js\build 
$ browserify js\build\app.js -o bundle.js 


在 Windows 系统 上 没有 cat 命令 ,但 是 你 可 以 这 样 拼接 文件 : 








$ type css\components\* css\* > bundle.css 

















要 标 换 字符 串 (让 CSS 在 images 中 寻找 图 片 ， 而 不 是 ../../images)， 你 需要 借助 powershell 
的 一 些 高 端 特性 : 


$ (Get-Content bundle.css).replace('../../images', 'images') | Set-Content bun 
dle.css 


5.3.6 在 开发 过 程 中 构建 
每 次 修改 文件 后 都 要 手动 运行 构建 过 程 是 一 件 痛苦 的 事情 。 幸 好 ， 你 可 以 通过 脚本 监听 目 
录 中 的 文件 改变 ， 并 自动 运行 构建 脚本 。 


首先 ， 我 们 把 构建 过 程 用 到 的 三 条 命令 放 到 一 个 文件 中 ， 并 命名 为 scripts/build.sh: 
# 转换 js 


babel --presets react,es2015 js/source -d js/build 
# 打包 js 

browserify js/build/app.js -o bundle.js 

# 打包 css 


cat css/*/* css/*.css | sed 's/..\/..\/images/images/g' > bundle.css 


# 完成 


date; echo; 
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接 下 来 ， 安 装 一 个 名 为 watch 的 NPM 包 : 


$ npm install - 


-save-dev watch 


运行 watch 命令 对 js/source/ 和 /css 目录 中 的 任意 更 改进 行 监听 ， 一 旦 文件 内 容 发 生变 化 ， 
就 运行 scripts/build.sh 文件 中 的 脚本 : 


$ watch "sh scripts/build.sh" js/source css 


> Watching js/source/ 
> Watching css/ 


js/source/app.js 
js/source/components/Logo. js 
Sat Jan 23 19:41:38 PST 2016 


-> js/build/app.js 


-> js/build/components/Logo. js 


当然 ， 你 也 可 以 把 命令 放 在 scripts/watch.sh 中 。 每 当 你 进行 应 用 开发 时 ， 


代码 即 可 : 





$ sh scripts/watch.sh 


你 可 以 对 源 文件 进 


5.4 ”发布 





行 修改 ， 然 后 刷新 浏览 嚣 来 查看 新 的 构建 。 





只 需要 运行 如 下 





目前 差不多 可 以 发 布 应 用 了 ， 人 了 了 构建 ， 所 以 发 布 过 程 没有 太 








大 的 工作 量 。 不 过 在 应 用 正式 上 线 之 前 ， 你 可 能 还 需要 作 一 些 额 外 的 处 理 





和 图 像 优化 。 


EE ， 比 如 代码 压缩 





我 们 以 常用 的 JavaScript 压缩 工具 uglify 和 CSS 压缩 工具 cssshrink 为 例 ， 实 现 一 套 简单 
的 发 布 流程 。 你 可 以 在 此 基础 上 压缩 HTML 代码 、 优 化 图 像 、 复 制 文件 到 内 容 分 发 网 络 


(content delivery network, CDN), 


scripts/deploy.sh XH 








# 删除 上 一 个 版 本 
m -rf __deployme 
mkdir __deployme 





# 构建 


sh scripts/build.sh 


# 压缩 JavaScript 
uglify -s bundle.js -o __deployme/bundle. js 








# 压缩 CSS 


cssshrink bundle.css > __ 


# 复制 HTML 和 图 片 


cp index.html 


的 内 容 如 下 : 


做 




















共 他 任何 你 需要 的 事情 。 


deployme/bundle.css 


__deployme/index.html 








cp -r images/ __deployme/images/ 


# 完成 
date; echo; 





在 脚本 运行 完毕 后 ， 你 会 得 到 一 个 新 的 目录 。 这 个 名 为 _deployme 的 目录 中 包含 以 下 内 容 : 





。 index.html 

。 压缩 后 的 bundle.css 
。 压缩 后 的 bundle.js 
。 images/ 文件 来 





接 下 来 你 只 需要 把 整个 目录 复制 到 服务 器 上 ， 就 可 以 为 用 户 提 供 这 个 新 版 本 的 应 用 了 。 





5.5 ”更 进一步 

现在 你 已 经 拥有 了 一 个 简单 的 基于 shell 脚本 的 构建 和 发 布 流 程 。 你 可 以 根据 具体 需要 扩展 
这 些 脚 本 ， 也 可 以 尝试 使 用 一 些 专业 的 构建 工具 (比如 Grunt 或 者 Gulp) 进行 构建 ， 以 便 
更 好 地 满足 你 的 需求 。 

在 完成 所 有 的 构建 和 转译 流程 后 ， 我 们 将 关注 一 个 更 有 趣 的 话题 ， 利用 JavaScript 提供 的 
各 种 新 特性 ， 构 建 并 测试 一 款 真 正 的 应 用 。 
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第 6 章 


构建 应 用 











到 目前 为 止 ， 你 已 经 学 会 : 创建 React 自 定义 组 件 (以 及 使 用 内 建 组 件 ) 的 所 有 相关 基础 
知识 ， 使 用 JSX 定义 用 户 界面 〈 可 选 ) 的 方法 ， 以 及 构建 并 发 布 应 用 的 流程 。 是 时 候 创 建 
一 个 更 完整 的 应 用 了 。 

















我 们 把 这 个 应 用 称 为 Whinepad， 用 户 可 以 在 这 个 应 用 中 对 品尝 过 的 酒 类 写 下 笔记 并 进行 
评价 。 事 实 上 , 用 户 不 仅 可 以 评价 酒 类 , 还 可 以 留 下 任何 想 要 抱 忽 ”的 内 容 。 这 个 应 用 应 该 
涵盖 常见 的 添加 、 查 询 、 修 改 、 删 除 (CRUD) 功能 。 此 外 ， 它 还 是 一 个 把 数据 存储 在 客 
户 端的 纯 客 户 端 应 用 。 由 于 本 书 以 学 习 React 为 目的 ， 应 用 中 所 有 与 React 不 相关 的 部 分 
(比如 数据 存储 、 样 式 等 ) 将 不 作 详 述 。 


在 本 章 中 ， 你 将 学 习 以 下 内 容 : 


。 从 可 重用 的 小 组 件 开始 ， 构 建 整个 应 用 ， 
。 进行 组 件 间 通 信 ， 让 不 同 的 组 件 共 同 发 挥 作用 。 














6.1 Whinepad v.0.0.1 

我 们 将 在 上 一 章 建立 的 模板 应 用 的 基础 上 进行 Whinepad 应 用 的 开发 。 当 你 品尝 了 一 些 新 
的 酒 类 之 后 ， 可 以 在 这 个 应 用 中 记录 笔记 并 进行 评价 。 不 如 就 把 欢迎 界面 设置 为 曾经 评价 
过 的 内 容 列表 吧 ? 这 只 需 简单 地 重用 第 3 章 创建 的 <Excel> 组 件 即 可 。 























注 1: 英文 原文 是 whine， 与 酒 类 (wine) 同音 。 这 个 单词 在 应 用 名 中 用 作 双 关 。 一 一 编者 注 
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6.1.1 基本 设置 

首先 复制 一 份 reactbook-boiler 模板 应 用 的 源 代 码 ， 然 后 把 项 目 重 命名 为 whinepad 
v9.0.1， 并 在 此 基础 上 进行 开发 。( 可 以 从 https://github.com/stoyan/reactbook/ 下 载 代码 。) 
下 一 步 ， 运 行 监听 脚本 ， 以 便 在 文件 内 容 发 生 改变 时 自动 重新 构建 : 











$ cd ~/reactbook/whinepad\ v0.0.1/ 
$ sh scripts/watch.sh 


6.1.2 ”开始 编写 代码 


修改 index.html 文件 中 的 标题 ， 并 把 id 属性 修改 为 td="pad"， 以 匹配 我 们 的 应 用 名 称 : 





<!DOCTYPE htmL> 
<htmL> 
<head> 
<title>whinepad v.0.0.1</title> 
<meta charset="utf-8"> 
<link rel="stylesheet" type="text/css" href="bundle.css"> 
</head> 
<body> 
<div id="pad"></div> 
<script src="bundle. js"></script> 
</body> 
</html> 





我 们 把 ISX 版 本 Excel 组 件 的 源 代码 (出 现在 第 4 章 末 尾 处 ) 复制 到 js/source/components/ 
Excel.js 中 : 


import React from 'react'; 


var Excel = React.createClass({ 


// 省 略 部 分 代码 

















render: function() { 
return ( 
<div className="Excel"> 
{this._renderToolbar()} 
{this._renderTable()} 
</div> 
); 
}, 


// 省 略 部 分 代码 
p; 

















export default Excel 


上 述 代码 和 之 前 的 Excel 组 件 代 码 有 一 些 不 同 ， 在 于 : 
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。 使 用 了 import/export 语句 ; 
。 遵循 上 一 章 的 约定 ， 在 组 件 的 顶层 标签 添加 了 className="Excel" 属性 。 








相应 地 ， 所 有 CSS PENE RRIAT, WRI: 








.Excel table { 
border: 1px solid black; 


margin: 20px; 


} 


.Excel th { 
/* 样式 */ 
} 


/* 更 多 样式 */ 
目前 还 剩 下 一 项 工作 ， 就 是 在 主 文件 app.js 中 引入 <Excel> 组 件 。 前 面 已 经 提 到 ， 我 们 将 
在 客户 端 存 储 数据 (localstorage)。 在 起 步 阶段 ， 为 了 避免 页 面 空白 ， 我 们 构造 一 些 初 始 
数据 : 


var headers = localStorage.getItem('headers'); 
var data = localStorage.getItem('data'); 





if (!headers) { 
headers = ['Title', 'Year', 'Rating', 'Comments']; 


data = [['Test', '2015', '3', 'meh']]; 


接 下 来 把 数据 传递 到 <Excel> 组 件 中 : 


ReactDOM. render( 
<div> 
<h1> 
<Logo /> Welcome to Whinepad! 
</h1> 
<Excel headers={headers} initialData={data} /> 
</div>, 
document.getElementById('pad') 
)3 


在 Logo.css 文件 中 再 增添 一 些 样 式 ， 你 就 完成 了 这 个 0.0.1 版 本 (如 图 6-1 所 示 ) | 











® 2 DD Whinepad v.0.0.1 x 





[0 file: re ov ti an owatonnad a 0.1/index.html 


Er Welcome to Whinepad! 


Title Year Rating Comments 
Test 2015 3 meh 


























B 6-1; Whinepad v.0.0.1 


6.2 组 件 


在 开始 阶段 ， 我 们 轻松 地 重用 了 现 有 的 <Excel> 组 件 ， 然 而 这 个 组 件 已 经 包含 了 太 多 内 容 。 
为 了 体现 “分 而 治之 ”的 思想 ， 我 们 最 好 把 组 件 细 分 为 更 小 、 更 可 重用 的 组 件 。 举 个 例 
子 ， 按 钮 就 应 该 是 一 个 独立 的 组 件 ， 方 便 我 们 在 <Excel> 表格 以 外 的 地 方 使 用 。 








此 外 ， 这 个 应 用 还 需要 一 些 专用 的 组 件 。 比 如 评分 组 件 ， 让 我 们 可 以 通过 星星 显示 打分 ， 
而 非 仅仅 显示 一 个 数字 。 





现在 我 们 来 配置 这 个 新 的 应 用 ， 并 添加 一 个 辅助 工具 一 一 组 件 发 现 工 具 。 这 个 工具 可 以 帮 
你 做 到 下 面 两 点 。 


。 在 一 个 隔离 的 环境 中 开发 并 测试 组 件 。 通 常情 况 下 ， 在 应 用 中 开发 组 件 会 导致 组 件 和 应 
用 的 强 耦 合 ， 从 而 降低 组 件 的 可 用 性 。 独 立地 开发 组 件 可 以 帮助 你 在 思考 如 何 解 耦 时 作 

出 更 明智 的 选择 。 

。 方便 团队 中 的 其 他 成 员 发 现 并 重用 已 有 的 组 件 。 随 着 应 用 规模 的 增长 ， 团 队 成 员 也 会 增 
多 。 为 了 避免 在 同一 个 组 件 上 出 现 多 人 重复 开发 、 导 致 人 力 浪费 的 情况 ， 并 且 为 了 促进 
组 件 的 可 重用 性 (有 助 于 提高 应 用 开发 效率 )， 推 荐 做 法 是 把 所 有 组 件 以 及 如 何 使 用 的 
例子 全 部 放 在 一 个 地 方 。 









































6.2.1 设置 


先 按 下 CTRL+C 结束 旧 的 监听 脚本 进程 ， 以 便 开始 一 个 新 的 。 把 初始 的 最 小 可 行 产品 
(minimum viable product, MVP) whinepad v.09.0.1 复 制 到 一 个 名 为 whinepad 的 新 目录 中 : 








$ cp -r ~/reactbook/whinepad\ vO.0.1/ ~/reactbook/whinepad 
$ cd ~/reactbook/whinepad 
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$ sh scripts/watch.sh 


> Watching js/source/ 

> Watching css/ 

js/source/app.js -> js/build/app.js 
js/source/components/Excel.js -> js/build/components/Excel.js 
js/source/components/Logo.js -> js/build/components/Logo.js 
Sun Jan 24 11:10:17 PST 2016 


6.2.2 HEREMIA 
我 们 把 这 个 组 件 发 现 工具 命名 为 discovery.html， 并 放置 在 根 目录 下 : 


$ cp index.html discovery.html 


这 个 工具 不 需要 加 载 整个 应 用 ， 所 以 我 们 不 必 加 载 app.js， 只 需要 加 载 discover.js 就 可 以 
了 ， 后 者 包含 了 所 有 的 组 件 示例 。 因 此 ， 你 也 不 必 引 入 应 用 的 bundle.js， 只 需 引 入 一 个 单 
独 的 包 ， 比 如 discover-bundle js: 





<!DOCTYPE htmL> 
<htmL> 
<!-- fHindex.html— 
<body> 
<div id="pad"></div> 
<script src="discover-bundle. js"></script> 
</body> 
</html> 


TE 








额外 进行 一 次 打包 也 很 简单 ， 只 需要 在 build.sh 脚本 中 添加 一 行 : 


# js 打包 
browserify js/build/app.js -o bundle.js 
browserify js/build/discover.js -o discover-bundle.js 


最 后 ， 把 示例 组 件 <Logo> 添加 到 发 现 工具 中 (js/source/discover.js) : 


"use strict'; 


import Logo from './components/Logo'; 
import React from 'react'; 
import ReactDOM from 'react-dom'; 


ReactDOM. render ( 
<div style={ {padding: '20px'} }> 
<h1i>Component discoverer</h1> 


<h2>Logo</h2> 

<div style={ {display: 'inline-block', background: 'purple'} }> 
<Logo /> 

</div> 





{/* 可 以 在 此 放置 更 多 的 组 件 示例 */} 





</div>, 
document.getELementById('pad') 
)3 


每 当 你 编写 了 新 的 组 件 后 ， 就 可 以 在 这 个 新 组 件 发 现 工 具 (如 图 6-2 Bras) 中 进行 体验 。 
我 们 需要 在 每 个 新 组 件 诞生 后 ， 及 时 构建 并 更 新 这 个 工具 。 








一 














e> C IB file:///Users/stoyanstefanov/reactbook/whinepad/discover.html 





Component discoverer 


Logo 


6-2; Whinepad 的 组 件 发 现 工 具 











6.2.3 <Button> 组 件 

训 不 夸张 地 说 ， 每 个 应 用 都 离 不 开 按钮 组 件 。 我 们 通常 使 用 原生 的 <button 标签 按钮 ， 但 
有 时 候 可 能 不 得 不 使 用 <a> 标签 按钮 ， 在 第 3 章 中 用 到 的 下 载 按钮 就 属于 后 者 。 让 我 们 创 
建 一 个 更 通用 的 <Button> 按钮 组 件 ， 接 收 一 个 可 选 的 href 属性 ， 以 应 对 这 两 种 情况 吧 。 
如 果 href REFE, MEX <a> 标签 按钮 。 


本 着 测试 驱动 开发 (test-driven development, TDD) 的 思想 ， 你 可 以 先 在 discovery.js 工具 
中 定义 这 个 组 件 的 示例 用 法 。 




















修改 前 : 
import Logo from './components/Logo'; 
LI ease 8} 
{/* 可 以 在 这 里 放置 更 多 的 组 件 示 例 */} 
修改 后 : 


import Button from './components/Button'; 
import Logo from './components/Logo'; 
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{/* ... */} 


<h2>Buttons</h2> 

<div>Button with onClick: <Button onClick={() => alert('ouch')}>Click me</Button></ 
div> 

<div>A link: <Button href="http://reactjs.com">Follow me</Button></div> 
<div>Custom class name: <Button className="custom">I do nothing</Button></div> 











{/* 可 以 在 这 里 放置 更 多 的 组 件 示例 */} 








[或 许 我 们 可 以 把 这 种 方式 称 为 发 现 驱动 开发 (discovery-driven development, DDD) ? ] 


注意 到 上 述 代 码 中 的 () => alert('ouch') 模式 了 吗 ? 这 是 ES2015 Pap K 
数 的 一 种 示例 用 法 。 
以 下 是 箭头 函数 的 其 他 用 法 。 








e () = {} 这 是 一 个 空 国 数 ， 和 function() {} 类似。 

e (what, not) => console.log(what, not) 这 是 一 个 带 参 数 的 函数 。 

e (a, b) => { var c = a + b; return c;} 当 函 数 体 中 包含 多 个 语句 的 时 候 ， 
需要 使 用 花 括 号 G AR., 

e let fn = arg => {} 当 国 数 只 接收 一 个 参数 时 ， 可 以 省 略 圆 括号 ()。 











6.2.4 Button.css 

根据 之 前 的 约定 ，<Button> 组 件 的 样式 应 该 放 在 /css/components/Button.css 文件 中 。 这 个 
文件 没有 什么 特别 的 地 方 ， 只 包含 了 一 些 用 于 美化 的 CSS 样式 。 这 里 仅 列 出 一 套 样式 作为 
示范 ， 接 下 来 将 不 再 花费 时 间 详 述 其 他 组 件 的 CSS 样式 : 





.Button { 
background-color: #6f001b; 
border-radius: 28px; 
border: 0; 
box-shadow: Opx 1px 1px #d9d9d9; 
color: #fff; 
cursor: pointer; 
display: inline-block; 
font-size: 18px; 
font-weight: bold; 
padding: 5px 15px; 
text-decoration: none; 
transition-duration: 0.1s; 
transition-property: transform; 


} 


.Button:hover { 
transform: scale(1.1); 





6.2. 


首先 完 


这 个 组 件 虽 然 代 码 量 不 多 ， 但 是 代码 中 出 现 了 许多 新 的 概念 和 话 法 。 


5 Button.js 
整 阅读 一 志 /js/source/components/Button.js 的 源 代码 : 


import classNames from 'classnames'; 
import React, {PropTypes} from 'react'; 


function Button(props) { 
const cssclasses = classNames('Button', props.className); 
return props.href 
? <a {...props} className={cssclasses} /> 
: <button {...props} className={cssclasses} />; 


} 


Button.propTypes = { 
href: PropTypes.string, 
J}; 


export default Button 


这 段 代 码 ! 


1. classnames 包 


import classNames from 'classnames'; 


让 我 们 从 头 开 始 分 析 

















(通过 npm i --save-dev classnames 安装 的 ) classnames 包 提 供 了 一 个 处 理 CSS 类 名 的 
辅助 函数 。 我 们 经 常会 碰 到 这 种 情况 ， 要 让 组 件 既 拥有 自身 的 类 名 ， 又 能 从 父 组 件 灵活 地 





接收 

















自 定义 的 类 名 。 在 过 去 ，React 的 插件 包 可 以 完成 这 项 任务 ,但 现在 我 们 更 推荐 使 用 


classnames 这 个 第 三 方 包 来 完成 。classnames 的 使 用 方式 很 简单 ， 只 需要 一 个 函数 : 








const cssclasses = classNames('Button', props.className) ; 








来 (如 图 6-3 所 示 )。 


在 创建 组 件 时 ， 这 行 代码 负责 把 类 名 Button 和 传递 进来 的 任意 类 名 (如果 有 的 话 ) 合并 起 
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Buttons 


Button with onClick: CED 


A link: KIANA: button. Button. custom 133.984px x 31px 

















Custom class name: WME T illite 

RO Elements Console Sources Network Timeline Profiles Resources Audits Rea 
<html> 

> <head>..</head> 

v <body> 


v <div id="pad"> 
v <div style="padding:20px;" data-reactid=". 0"> 
<h1 data-reactid=".0.0">Component discoverer</h1> 
<h2 data-reactid=".0.1">Logo</h2> 
> <div style="display: inline-block; background: purple;" data-reactid=".0.2">.</div> 
<h2 data-reactid=".0.3">Buttons</h2> 
> <div data-reactid=".0.4">..</div> 
v <div data-reactid=".0.5"> 
<span data-reactid=".0.5.0">A link: </span> 
<a href="http://reactjs.com" class="Button" data-reactid=".0.5.1">Follow me</a> 
</div> 
v <div data-reactid=".0.6"> 
<span data-reactid=".0.6.0">Custom class name: </span> 
button class="Button custom’ data-reactid=".0.6.1'>I do nothing</button 


</div> 
</div> 
</div> 
<script src="discover-bundle.js"></script> 
</body> 
</html> 








6-3; 带 有 自 定 义 类 名 的 <Button> 组 件 


你 也 可 以 选择 不 依赖 第 三 方 包 ， 自 己 进行 类 名 的 拼接 ， 但 classnames 对 其 稍 
微 进行 了 封装 ， 让 你 可 以 更 加 方便 地 完成 这 项 工作 。 此 外 ， 它 还 让 你 可 以 根 
据 条 件 有 选择 地 设 定 类 名 ， 用 法 也 很 方便 ， 比 如 : 


<div className={classNames({ 
'mine': true, // 总 是 包含 该 类 名 
'highlighted': this.state.active, // 根据 组 件 的 state 决定 
'hidden': this.props.hide, // 也 可 以 根据 props 决定 

p} /> 








2. 解构 赋值 


import React, {PropTypes} from 'react'; 
上 述 语句 是 以 下 声明 方法 的 简写 形式 : 
import React from 'react'; 


const PropTypes = React.PropTypes; 
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3. 无 状态 函数 式 组 件 

当 一 个 组 件 的 功能 非常 简单 〈 这 没有 任何 不 妥 之 处 ) 且 不 需要 维护 状态 时 ， 可 以 选择 使 用 
国 数 定义 这 个 组 件 。 国 数 体 的 内 容 等 价 于 render() 方法 中 的 内 容 。 该 函数 接收 的 第 一 个 
参数 包含 了 所 有 属性 一 一 这 就 是 在 函数 体 中 使 用 props.href， 而 非 使 用 类 或 对 象 中 this. 
props.href 的 原因 。 








可 以 使 用 箭头 国 数 对 函数 进行 重 写 : 


const Button = props => { 
yh ie 
}; 


还 可 以 把 函数 体 简 化 为 一 句 话 ， 进 而 省 略 {}, ; 和 return: 


Const Button = props => 
props.href 
? <a {...props} className={classNames('Button', props.className)} /> 
: <button {...props} className={classNames('Button', props.className)} /> 


4. propTypes 
如 果 你 使 用 了 ES2015 的 类 或 者 国 数 式 组 件 的 语法 ， 你 需要 在 组 件 定义 后 ， 把 类 似 
propTypes 这 样 的 属性 以 静态 属性 的 方式 进行 定义 。 











旧版 语法 (ES3, ESS) : 
var PropTypes = React.PropTypes; 


var Button = React.createClass({ 
propTypes: { 
href: PropTypes.string 
}, 
render: function() { 


/* ide */ 
} 
}); 
新 版 语法 (ES2015 的 类 ) : 
import React, {Component, PropTypes} from 'react'; 


class Button extends Component { 
render() { 
/* jie */ 
} 
} 


Button.propTypes = { 
href: PropTypes.string, 
J; 





构建 应 用 | 105 


如 果 使 用 无 状态 函数 式 组 件 ， 用 法 如 下 : 


import React, {Component, PropTypes} from 'react'; 


const Button = props => { 
/* fie */ 

J}; 

Button.propTypes = { 


href: PropTypes.string, 
}; 


6.2.6 ”表单 








我 们 目前 已 经 完成 了 <Button> 组 件 的 创建 。 接 下 来 进行 一 项 对 于 任何 数据 录入 应 用 都 必 不 
可 少 的 工作 : 处 理 表单 。 作 为 应 用 开发 者 ， 我 们 很 少 满足 于 浏览 器 内 建 表单 的 样式 和 使 用 














体验 ， 因 此 更 倾向 于 创建 自 定义 版 本 的 表单 。 这 个 Whi 





我 们 将 创建 一 个 通用 的 <FormInput> 组 件 ， 其 中 包含 一 


getValue() 方法 。 根 据 所 传 入 type 属性 值 的 不 同 ， 组 们 





nepad 应 用 也 不 例外 。 


个 让 调用 者 获取 用 户 输入 内 容 的 
负责 把 输入 元 素 的 创建 工作 委托 给 





具体 的 组 件 进行 创建 ， 比 如 <Suggest> 组 件 、<Rating> 等 。 





我 们 先 从 相对 底层 的 组 件 开始 ， 它 们 都 只 需要 实现 自身 





6.2.7 <Suggest> 


的 render() 和 getValue() 方法。 


在 Web 开发 中 ， 经 常 可 以 见 到 各 式 各 样 带 有 自动 提示 功能 (又 名 typeahead) 的 输入 











框 ， 其 中 有 些 相当 出 色 ， 但 我 们 打算 直接 借助 浏览 器 
(https://developer.mozilla.org/en/docs/Web/HTML/Elemen 
点 (如 图 6-4 所 示 )。 











已 经 提供 的 <datalist>HTML 元 素 
t/datalist) 把 这 项 功能 做 得 简单 一 











Suggest 

















ml v 

meenie 

miney 

mo 
E4 g Elements Console Sources Network Timeline Profiles Resources 


v <UIV Udta-Tedacttiu= .v.6 = 
v <div data-reactid=".0.8.0"> 
<input list="fc8b6428" data-reactid=".0.8.0.0'> 
v<datalist id="fc8b6428" data—-reactid=".0.8.0.1"> 
<option value="eenie" data—reactid=".0.8.0.1.$0"></option> 
<option value=""meenie" data-reactid=".0.8.0.1.$1'></option> 
<option value="miney" data-reactid=".0.8.0.1.$2"></option> 
<option value="mo" data-reactid=".0.8.0.1.$3"></option> 
</datalist> 
</div> 
</div> 








& 6-4: <Suggest> 输入 框 
首要 任务 是 更 新 发 现 工具 : 








<h2>Suggest</h2> 
<div><Suggest options={['eenie', 'meenie', 'miney', 'mo']} /></div> 


E FREE /js/source/components/Suggest.js 文件 中 实现 组 件 逻 辑 : 
import React, {Component, PropTypes} from 'react'; 
class Suggest extends Component { 


getValue() { 
return this.refs.lowlevelinput.value; 


} 


render() { 
const randomid = Math.random().toString(16).substring(2); 
return ( 
<div> 
<input 
list={randomid} 
defauLtValue={this.props.defauLtValue} 
ref="Lowlevelinput" 
id={this.props.id} /> 
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<datalist id={randomid}>{ 

this.props.options.map((item, idx) => 
<option value={item} key={idx} /> 

) 

}</datalist> 

</div> 
); 
} 
} 


Suggest.propTypes = { 
options: PropTypes.arrayOf(PropTypes.string), 
J}; 


export default Suggest 





上 述 的 组 件 代 码 设 有 什么 特别 的 地 方 ， 只 是 简单 地 封装 了 一 个 <input> 并 (通过 randomid) 


附带 了 一 个 <datalist>, 





根据 ES 的 新 语法 ， 还 可 以 利用 解构 赋值 (destructuring assignment) 从 对 象 中 提取 多 个 属 
性 并 赋值 给 同一 个 变量 ， 

















// 旧 语 法 

import React from 'react'; 

const Component = React.Component; 
const PropTypes = React.PropTypes; 


// 新 语法 


import React, {Component, PropTypes} from 'react'; 


至 于 React 的 新 概念 ， 这 里 用 到 了 ref 属性 。 








ref 
思考 如 下 代码 : 
<input ref="domelement" id="hello"> 
/* 随后 */ 
console. log(this.refs.domelement.id === 'hello'); // 输出 true 





你 可 以 利用 ref i a React 组 件 实例 进行 命名 ， 并 在 随后 引用 该 组 件 。 你 可 以 为 
任何 组 件 添加 ref 属性 ， 但 通常 是 当 你 需要 取得 组 件 的 底层 DOM 元 素 时 才 需 要 这 么 做 。 
使 用 ref 是 一 种 变通 的 方法 ，) 人 可 以 实现 相同 的 功能 。 
































在 上 面 的 例子 中 ， 你 希望 在 需要 时 取得 <input> 的 值 。 我 们 还 可 以 将 输入 框 内 容 的 改变 理 
解 为 组 件 state 发 生 了 改变 ， 因 此 可 以 改 为 使 用 this.state 进行 跟踪 : 





class Suggest extends Component { 


constructor(props) { 





super(props); 
this.state = {value: props.defaultValue}; 


} 


getValue() { 
return this.state.value; // 不 需要 用 ref 了 
} 





render() {} 


这 样 <input> 不 再 需要 添加 ref 属性 了 ， 但 是 需要 添加 onChange 事件 监听 器 ， 以 便 更 新 
状态 : 














<input 
List={randomid} 
defaultValue={this.props.defaultValue} 
onChange={e => this.setState({value: e.target.value})} 
id={this.props.id} /> 


注意 在 构造 国 数 constructor() 中 使 用 了 this.state = {};。 这 种 用 法 在 ES6 中 替代 了 原 
本 的 getInitialState() 国 数 。 


6.2.8 <Rating> 组 件 
这 个 应 用 是 用 于 对 已 品尝 酒 类 记录 笔记 的 。 最 偷懒 的 一 种 记录 方法 就 是 进行 星 级 评分 ， 比 
如 从 一 星 到 五 星 。 











通过 一 些 可 配置 的 选项 ， 可 以 让 这 个 星 级 评分 组 件 变 为 高 度 可 重用 。 














。 显示 的 星 级 数量 可 以 为 任意 数值 。 黑 认 值 是 5， 但 是 也 可 以 变 为 其 他 数值 ， 比 如 11。 
。 只 读 属性 。 有 些 时 候 你 不 愿 让 重要 的 评分 数据 因为 用 户 误 点 击 而 丢失 。 


首先 在 发 现 工具 中 编写 测试 (如 图 6-5 所 示 ) : 





























<h2>Rating</h2> 

<div>No initial value: <Rating /></div> 

<div>Initial value 4: <Rating defaultValue={4} /></div> 

<div>This one goes to 11: <Rating max={11} /></div> 
<div>Read-only: <Rating readonly={true} defaultValue={3} /></div> 
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Rating 
No initial value: Ww x Ww Xx Xx 


: EY Wee Waa Seg ee 

Initial value 4: ; 7 7 J X 

This one goes to 11: KX XKX KOK KOK KK 
ay ee ey E 

Read-only: ; / / TS 








图 6-5: 星 级 评分 组 件 
在 编写 具体 逻辑 之 前 ， 需 要 设置 属性 类 型 ， 并 列 出 需要 维护 的 状态 : 





import classNames from 'classnames'; 
import React, {Component, PropTypes} from 'react'; 


class Rating extends Component { 


constructor(props) { 

super(props); 

this.state = { 
rating: props.defaultVaLue, 
tmpRating: props.defaultVaLlue, 
}; 
} 


/* 更 多 方法 */ 
} 


Rating.propTypes = { 
defaultValue: PropTypes.number, 
readonly: PropTypes.bool, 
max: PropTypes.number, 


}; 


Rating.defaultProps = { 
defaultValue: 0, 
max: 5, 


as 


export default Rating 





这 些 属 性 的 作用 一 目 了 然 : max 代表 星星 的 数量 ，readonly 决定 组 件 是 否 只 读 。 在 state 
HH, rating 属性 对 应 当前 的 评分 ，tmpRating 则 对 应 用 户 把 鼠标 放 在 星星 上 移动 但 尚未 点 
提交 时 显示 的 评分 。 











cu 





接 下 来 编写 一 些 辅 助 函数 ， 帮 助 我 们 处 理 用 户 与 组 件 进行 交互 时 发 生 的 状态 变化 : 

















getValue() { // 我 们 的 所 有 输入 组 件 都 提供 了 这 个 函数 


return this.state.rating; 


} 


setTemp(rating) { // 用 户 把 鼠标 放 在 组 件 上 时 ,调用 该 方法 
this.setState({tmpRating: rating}); 
} 


setRating(rating) { // 用 户 点 击 组 件 时 ,调用 该 方法 
this.setState({ 
tmpRating: rating, 
rating: rating, 
}) 
} 


reset() { // 用 户 把 鼠标 移 开 时 ,调用 该 方法 
this.setTemp(this.state.rating); 


} 
componentWillReceiveProps(nextProps) { // 响应 组 件 外 部 的 变化 
this.setRating(nextProps.defauLtValue) ; 


} 


最 后 实现 render() 方法 ， 其 逻辑 包括 以 下 两 点 。 















































。 演 染 星星 的 循环 ， 循 环 次 数 从 1 开始 ， 到 this.props.max 结束 。 星 星 可 以 用 符号 
&#9734; 表示 。 当 星星 包含 类 名 Ratingon t, Maw ABE, 

一 个 隐藏 的 <input> 表单 域 ， 可 以 像 真正 的 表单 输入 框 那样 使 评分 的 值 通过 常用 的 方法 
取 值 (和 任何 普通 的 <input> 标签 一 样 ) : 


render() { 
const stars = []; 
for (let i = 1; i <= this.props.max; i++) { 
stars.push( 
<span 
className={i <= this.state.tmpRating ? 'RatingOn' : null} 
key={i} 
onClick={!this.props.readonly && this.setRating.bind(this, i)} 
onMouseOver={!this.props.readonly && this.setTemp.bind(this, i)} 
> 
&#9734; 
</span>); 














return ( 
<div 
className={classNames({ 
'Rating': true, 
"RatingReadonly': this.props.readonly, 
})} 
onMouseOut={this.reset.bind(this)} 
> 
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{stars} 
{this.props.readonly || !this.props.id 
? null 
: <input 
type="hidden" 
id={this.props.id} 
value={this.state.rating} /> 
} 
</div> 
); 
} 


在 这 里 有 一 个 地 方 需要 注意 ， 那 就 是 bind 方法 的 使 用 。 在 泻 染 星星 的 循环 中 ， 绑 定 当前 循 
环 中 站 的 值 很 合理 ， 但 为 什么 要 使 用 this.reset.bind(this) E? 事实 上 ， 这 是 在 使 用 ES 
class 语法 时 完成 绑 定 的 一 种 方式 。 一 共有 三 种 方法 可 以 完成 绑 定 : 











。 使 用 this.method.bind(this)， 正 如 你 在 上 述 例子 中 所 看 到 的 那样 ， 
。 使 用 第 头 函 数 会 自动 进行 绑 定 ， 比 如 (_unused_event_) => this.method(); 
。 在 构造 函数 中 一 次 性 绑 定 。 


关于 第 三 种 方法 ， 具 体 做 法 如 下 : 








class Comp extents Component { 
constructor(props) { 
this.method = this.method.bind(this); 


} 


render() { 
return <button onClick={this.method}> 
} 
} 


这 种 做 法 的 一 个 优点 是 ， 你 可 以 像 以 前 (使 用 React.createClass({}) 时 ) 一 样 ， 直 接 使 
用 this.method 的 引用 。 另 一 个 优点 是 只 需 绑 定 一 次 即 可 ， 不 需要 在 每 次 调用 render() 方 
法 时 都 绑 定 。 它 的 不 足 之 处 在 于 会 在 控制 器 中 增添 更 多 的 模板 代码 。 


6.2.9 <FormInput>“ 工 厂 组 件 ” 


接 下 来 编写 一 个 通用 的 <FormInput> 组 件 ， 它 负责 根据 传 和 的 属性 泻 染 对 应 的 组 件 。 通 过 
该 组 件 产生 的 输入 组 件 具 有 一 致 的 行为 都 提供 了 用 于 取 值 的 getValue() 方法 )。 




















在 发 现 工具 中 编写 测试 (如 图 6-6 所 示 ) : 


<h2>Form inputs</h2> 
<table><tbody> 
<tr> 
<td>Vanilla input</td> 
<td><FormInput /></td> 





</tr> 
<tr> 
<td>Prefilled</td> 
<td><FormInput defaultValue="it's like a default" /></td> 
</tr> 
<tr> 
<td>Year</td> 
<td><FormInput type="year" /></td> 
</tr> 
<tr> 
<td>Rating</td> 
<td><FormInput type="rating" defaultValue={4} /></td> 
</tr> 
<tr> 
<td>Suggest</td> 
<td><FormInput 
type="suggest" 
options={['red', 'green', 'blue']} 
defaultValue="green" /> 
</td> 
</tr> 
<tr> 
<td>Vanilla textarea</td> 
<td><FormInput type="text" /></td> 











</tr> 
</tbody></table> 

Form inputs 

Vanilla input 

Prefilled it's like a default 

Year 2016 

i ay ey Se ee A 

Rating aK BK / x 

Suggest green v | 
ted - 

Vanilla textarea green 
blue i 

6-6: 表单 输入 





<FormInput> 组 件 的 实现 (js/source/components/FormInput.js) 和 以 往 类 似 ， 使 用 了 import, 
export 以 及 用 于 验证 属性 的 propTypes: 





import Rating from './Rating'; 
import React, {Component, PropTypes} from 'react'; 
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import Suggest from './Suggest'; 


class FormInput extends Component { 
getValue() {} 
render() {} 


} 


FormInput.propTypes = { 
type: PropTypes.oneOf(['year', 'suggest', 'rating', 'text', 'input']), 
id: PropTypes.string, 
options: PropTypes.array, // 用 于 <option> 选 项 列表 的 自动 补 全 功能 
defaultValue: PropTypes.any, 

}; 




















export default FormInput 


render() 方法 包含 一 个 大 的 switch 语句 块 ， 负 责 把 输入 元 素 创 建 的 工作 分 配给 某 一 个 
具体 的 组 件 。 如 果 没 有 匹配 到 自 定义 组 件 ， 则 默认 泻 染 内 建 的 DOM 元 素 <input> 与 


<textarea>.: 


render() { 
const common = { // 通用 属性 
id: this.props.id, 
ref: 'input', 
defaultValue: this.props.defaultValue, 
}; 
switch (this.props.type) { 
case 'year': 
return ( 
<input 
{... common} 
type="number" 
defaultValue={this.props.defaultValue || new Date().getFullYear()} /> 

















)3 
case 'suggest': 
return <Suggest {...common} options={this.props.options} />; 
case 'rating': 
return ( 
<Rating 
{...common} 
defaultValue={parseInt(this.props.defaultValue, 10)} /> 
)3 
case 'text': 
return <textarea {...common} />; 
default: 
return <input {...common} type="text" />; 
} 
} 


注意 到 ref 属性 的 使 用 了 吗 ? 


llig] 





大 实 上 ， 在 获取 输入 框 的 取 值 时 ，ref 属性 是 比较 方便 实用 的 : 


getValue() { 
return 'value' in this.refs.input 





114 | $62 


? this.refs.input.value 
: this.refs.input.getValue(); 


} 


在 这 里 ，this.refs.input 是 底层 DOM 元 素 的 一 个 引用 。 对 于 原生 DOM 元素， 比如 
<input> 和 <textarea>, jf if this.refs.input.value žk Hx value 属性 值 (就 像 原生 的 
DOM 操作 方法 document.getElLementById('some-input').value 那样 )。 对 于 自 定 义 组 件 ， 
比如 <Suggest> 和 <Rating>， 则 调用 它们 本 身 的 getValue() 方法 。 








6.2.10 <Form> 
现在 你 已 经 拥有 了 以 下 组 件 : 
© 自 定义 输入 元 素 (比如 <Rating>) ; 


。 内 置 的 输入 元 素 (比如 <textarea>) ; 
e <FormInput>， 一 个 根据 type 属性 创建 输入 元 素 的 工厂 组 件 。 











是 时 候 建 立 一 个 <Form> 组 件 把 以 上 组 件 组 合 到 一 起 了 (如 图 6-7 所 示 )。 

















Form 
Rating: 
af ee Se Sa 
$ B 上 / 六 
Greetings: 


Hello 





input#i 171px x 41px 


Form readonly 














Rating: 
a ee EY ea 
/ 上 / / x 
Greetings: 
Hello 
R 0 Elements Console Sources Network Timeline Profiles Resources 


严 <TaUTE Uataredttly= ey! sy UdU TES 
<h2 data-reactid=".0.g">Form</h2> 
<form class="Form" data-reactid=".0.h"> 
><div class="FormRow" data-react h.$r">.</div> 
v<div class="FormRow" data-reactid=".0.h.$i"> 
p<label class="FormLabel" for="i" data-reactid=".0.h.$i.0">..</label> 
$i. 







‘input id="i" type="text" value="Hello" data—-reactid=".0.h.$i.1 
</div> 
</form> 
<h2 data-reactid=".0.i">Form readonly</h2> 
> <form class="Form" data-reactid=".0.j">..</form> 
</div> 














6-7: 表单 


表单 组 件 应 该 是 可 重用 的 ， 因 此 不 应 该 把 关于 这 个 评价 应 用 的 逻辑 硬 编码 到 该 组 件 中 。 
(更 进一步 说 ， 关 于 酒 的 一 切 都 不 应 该 被 硬 编码 ， 这 样 组 件 才能 重新 被 应 用 到 供用 户 抱怨 
E.) 这 个 <Form> 组 件 可 以 通过 fields 数组 进行 表单 域 的 配置 ， 而 每 项 表单 域 的 定义 内 容 
包括 : 
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。 输入 类 型 type, WEW input; 

。 id 属性 ， 以 便 在 随后 找到 这 个 输入 元 素 ; 

e label 属性 ， 即 输入 元 素 的 标签 内 容 ， 

。 可 选 属性 options， 用 于 传递 自动 建议 的 内 容 列 表 。 











此 外 ，<Form> 组 件 还 接收 一 个 包含 了 默认 值 的 对 象 ， 并 且 配 置 是 否 只 读 的 选项 ， 用 于 阻止 
用 户 编辑 表单 内 容 : 











import FormInput from './FormInput'; 
import Rating from './Rating'; 
import React, {Component, PropTypes} from 'react'; 


class Form extends Component { 
getData() {} 
render() {} 

} 


Form.propTypes = { 
fields: PropTypes.arrayOf(PropTypes.shape({ 
id: PropTypes.string.isRequired, 
label: PropTypes.string.isRequired, 
type: PropTypes.string, 
options: PropTypes.arrayOf(PropTypes.string), 
})).isRequired, 
initialData: PropTypes.object, 
readonly: PropTypes.bool, 
}; 


export default Form 





注意 这 里 使 用 了 PropTypes.shape。 该 方法 具体 地 表明 了 对 象 希 望 接收 的 内 容 。 这 种 用 法 比 
起 概括 性 地 使 用 fields: PropTypes.arrayOf(PropTypes.object) 或 者 fields: PropTypes. 
array 更 为 严格 ， 而 且 当 其 他 开发 者 开始 使 用 你 的 组 件 时 ， 这 样 做 有 助 于 减少 错误 情况 的 
发 生 。 

















initialData 是 一 个 键 值 型 的 对 象 字典 ({fieldname: value})， 与 组 件 的 getData() 方法 所 
返回 的 数据 格式 一 致 。 








以 下 是 <Form> 组 件 的 示例 用 法 ， 放 置 在 发 现 工具 中 : 





<Form 
fields={[ 
{label: 'Rating', type: 'rating', id: 'rateme'}, 
{label: 'Greetings', id: 'freetext'}, 
]} 


initialData={ {rateme: 4, freetext: 'Hello'} } /> 


现在 回 到 组 件 的 逻辑 实现 。 这 个 组 件 还 需要 实现 getData() 与 render() 方法 : 








getData() { 
let data = {}; 
this.props.fields.forEach(field => 
data[field.id] = this.refs[field.id].getValue() 
3 
return data; 


} 


如 你 所 见 ， 这 个 方法 只 需要 把 render() 方法 中 设置 的 ref 属性 循环 一 志 ， 并 且 调 用 输入 元 
素 的 getvatLue( ) 方法 。 


render() 方法 本 身 也 相当 简单 ， 没 有 用 到 任何 新 语法 或 新 特性 : 


render() { 
return ( 
<form className="Form">{this.props.fields.map(field => { 

const prefilled = this.props.initialData && this.props.initial 
Data[field.id]; 

if (!this.props.readonly) { 

return ( 
<div className="FormRow" key={field.id}> 
<label className="FormLabel" htmlFor={field.id}>{field.label}:</ 

















label> 
<FormInput {...field} ref={field.id} defaultValue={prefilled} /> 
</div> 


J; 


} 
if (!prefilled) { 
return null; 
} 
return ( 
<div className="FormRow" key={field.id}> 
<span className="FormLabel">{field.label}:</span> 


{ 
field.type === 'rating' 
? <Rating readonly={true} defaultValue={parseInt(prefilled, 
10)} /> 
: <div>{prefilled}</div> 
} 
</div> 
); 


}, this)}</form> 
); 
} 


6.2.11 <Actions> 


接 下 来 需要 关注 表格 中 的 行 。 表 格 的 每 一 行 都 应 该 可 以 进行 一 些 操作 (如 图 6-8 所 示 )， 包 
th: 删除 、 编 辑 与 查看 ( 当 信 息 没有 在 行内 显示 完全 时 ， 点 击 该 按钮 显示 完整 内 容 )。 
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Actions 





ORG TS 





6-8: 操作 





以 下 是 Actions 组 件 在 发 现 工 具 中 的 测试 用 例 : 


<h2>Actions</h2> 


<div><Actions onAction={type => alert(type)} /></div> 











其 具体 实现 也 相当 容易 : 








import React, {PropTypes} from 'react'; 
const Actions = props => 
<div className="Actions"> 
<span 
tabIndex="0" 
className="ActionsInfo" 
title="More info" 
onClick={props.onAction. 
<span 
tabIndex="0" 
className="ActionsEdit" 
title="Edit" 
onClick={props.onAction 
<span 
tabIndex="0" 
className="ActionsDelete" 
title="Delete" 


onClick={props.onAction.bind(null, 


</div> 


Actions.propTypes = { 


onAction: PropTypes. func, 
}; 
Actions.defaultProps = { 
onAction: () => {}, 
}; 


export default Actions 





ee ld 


函数 将 其 定义 为 无 状态 函数 式 组 件 。 











bind(null, 


.bind(null, 


只 需 实 现 render() 方法 且 不 需 


"info')}>&#8505;</span> 


"edit )}>&#10000; </span> 


"delete! )}>x</span> 


要 维护 状态 。 








>H 








此 可 以 通 


过 箭 


此 外 ， 我 们 还 使 用 了 最 简洁 的 语法 : 没有 return, 














没有 {}, BEA function 语句 。( 在 使 用 | 
数 吧 ! ) 


该 组 件 的 调用 者 可 以 通过 onAction 属性 注册 回 


日 语法 的 日 子 里 ， 我 们 大 概 很 鸡 








相当 简单 ， 作 用 是 让 子 组 件 通 知 父 组 件 有 变化 发 生 。 如 你 所 见 ， 添 加 








onAction、onAlienAttack 等 ) 就 是 如 此 轻松 。 


6.2.12 ”对 话 框 
接 下 来 建立 一 个 通用 的 对 话 让 








E 组 件 ， 用 于 显示 所 有 
(如 图 6-9 所 示 )。 比 如 在 添加 /编辑 表单 时 ， 需 要 在 数据 表格 的 顶部 显示 一 个 模 态 对 话 忆 














辨认 出 这 是 一 个 国 





调 国 数 ， 以 监听 动作 的 发 生 。 这 种 模式 也 
自 定义 事件 (比如 











的 消息 通知 (代替 atert()) 或 弹出 窗口 








[HI 
o 








Dialog 


Cut of the box 








Hello, dialog! 


Ne cancel, custom button 
Anything goes here, see: Ci 


example 


Cancel ( ok ] 








6-9: 对 话 框 
具体 用 法 : 


<Dialog 
header="0ut-of-the-box example" 
onAction={type => alert(type)}> 
Hello, dialog! 
</Dialog> 


<Dialog 
header="No cancel, custom button" 
hasCancel={false} 
confirmLabel="Whatever" 
onAction={type => alert(type)}> 
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Anything goes here, see: 
<Button>A button</Button> 
</Dialog> 


该 组 件 的 实现 方式 和 <Actions> 类 似 一 一 没有 状态 (只 需 实现 render() 方法 )， 





而 且 用 户 


点 击 对 话 框 的 底部 按钮 时 ， 将 会 触发 onAction 回调 函数 。 


import Button from './Button'; 


import React, {Component, PropTypes} from 


class Dialog extends Component { 


} 


Dialog.propTypes = { 
header: 
confirmLabel: PropTypes.string, 
modal: PropTypes.bool, 
onAction: PropTypes. func, 
hasCancel: PropTypes.bool, 

}; 


Dialog.defaultProps = { 
confirmLabel: 'ok', 
modal: false, 
onAction: () => {}, 
hasCancel: true, 


}; 


export default Dialog 


然而 > 
期 方法 : 


这 个 组 件 是 





componentWillUnmount() { 


"react'; 


PropTypes.string.isRequired, 


是 通过 类 定义 的 ， 而 非 第 头 函数 ， 因 为 该 组 件 需要 定义 两 个 额外 的 生命 周 


document.body.classList.remove('DialogModalOpen'); 


} 


componentDidMount() { 
if (this.props.modal) { 


document.body.classList.add('DialogModalOpen' ); 


} 
} 


在 显示 模 态 对 话 框 时 ， 需 要 给 
(添加 一 个 灰色 的 蒙 层 ) 。 


最 后 ，render() 方法 负责 把 模 态 框 的 包 
域 可 以 容纳 其 他 任何 组 件 (或 者 纯 文本 ) ， 





eB 
DEN 














document. body 添加 一 个 类 名 ,以便 控 制 整 个 页 面 的 样式 


层 、 头 部 、 内 容 区 域 以 及 底部 组 合 起 来 。 内 容 区 


对 话 框 本 身 没 有 对 内 容 作 过 多 限制 : 





render() { 
return ( 
<div className={this.props.modal ? 'Dialog DialogModal' : 'Dialog'}> 
<div className={this.props.modal ? 'DialogModalWrap' : null}> 
<div className="DialogHeader">{this.props.header }</div> 
<div className="DialogBody">{this.props.children}</div> 
<div className="DialogFooter"> 
{this.props.hasCancel 
? <span 
className="DialogDismiss" 
onClick={this.props.onAction.bind(this, 'dismiss')}> 


Cancel 
</span> 
: null 
} 
<Button onClick={this.props.onAction.bind(this, 
this.props.hasCancel ? 'confirm' : 'dismiss')}> 
{this.props.confirmLabel} 
</Button> 
</div> 
</div> 
</div> 


3 
} 


此 外 还 有 一 些 优化 点 ， 供 读者 思 























。 除了 提供 单个 onAction 属性 以 外 ， 另 一 种 方案 是 分 别提 供 onConfirm (用 户 点 击 确认 按 
钮 触发 ) 以 及 onDismiss (用 户 点 击 取 消 按 钮 触发 )。 

。 一 个 可 优化 的 点 是 在 用 户 按 下 Esc 键 时 关闭 模 态 杠 。 你 有 办 法 实现 这 个 功能 吗 ? 

。 BREW div 的 类 名 需要 进行 条 件 判断 ， 可 以 借助 classnames 模块 进行 优化 ， 用 法 如 
下 所 示 。 


修改 前 : 














<div className={this.props.modal ? 'Dialog DialogModal' : 'Dialog'}> 


修改 后 : 


<div className={classNames({ 
"Dialog': true, 
"DialogModal': this.props.modal, 
D} 


6.3 ”应 用 配置 


目前 为 止 ， 所 有 底层 组 件 都 已 ATR T. 还 剩 下 两 个 组 件 需 要 开发 ， 分 别 是 改进 版 本 的 数 
据 表 格 Excel 以 及 顶层 组 件 Whinepad。 这 两 者 都 需要 借助 一 个 schema 对 象 进行 配置 ， 它 用 
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于 描述 你 希望 在 应 用 中 处 理 的 数据 类 型 。 针 对 这 个 评 酒 应 用 ， 以 下 是 一 份 schema 示例 代码 


( js/source/. schema.js ) : 





import classification from './classification'; 


export default [ 
{ 
id: 'name', 
label: 'Name', 
show: true, // 设置 是 否 在 Excel 表 格 中 显示 
sample: '$2 chuck', 
align: ‘left', // 设置 对 齐 方式 
Jo 
{ 
id: 'year', 
label: 'Year', 
type: 'year', 
show: true, 
sample: 2015, 
J; 
{ 
id: 'grape', 
label: 'Grape', 
type: 'suggest', 
options: classification.grapes, 
show: true, 
sample: 'Merlot', 
align: 'left', 
} 
{ 
id: 'rating', 
label: 'Rating', 
type: 'rating', 
show: true, 
sample: 3, 
J; 
{ 
id: 'comments', 
label: 'Comments', 
type: 'text', 
sample: 'Nice for the price', 
Fo 
] 





这 个 示例 的 用 法 是 ECMAScript 模块 中 你 可 以 想到 的 最 简单 的 一 种 形式 一 一 只 输出 一 个 变量 。 
这 个 模块 还 引入 了 另 一 个 简单 的 模块 ， 里 面包 含 一 长 串 用 于 预 填充 表单 的 选项 (js/source/ 


classification.js) : 








export default { 
grapes: [ 
"Baco Noir', 
'Barbera', 
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"Cabernet Franc', 
"Cabernet Sauvignon’, 
i ree 
l» 
} 


借助 schema 模块 ， 现 在 你 就 可 以 配置 应 用 中 所 需 的 数据 类 型 了 。 


6.4 <Excel>: 改进 的 新 版 本 


我 们 在 第 3 章 中 创建 的 Excel 组 件 承 载 了 7 太 多 功能 。 因 此 我 们 需要 创建 一 个 改进 的 新 版 本 ， 
以 提高 组 件 的 可 重用 性 。 我 们 决定 删 减 搜索 功能 (把 功能 移 到 顶层 的 <Whinepad> 中 ) 与 下 
载 功 能 (如果 你 喜欢 的 话 也 可 以 保留 下 来 )。 这 个 组 件 的 全 部 功能 应 该 与 CRUD 中 的 RUD 
部 分 相关 (如 图 6-10 所 示 )。 由 于 这 是 一 个 可 编辑 的 表格 ， 我 们 还 需要 新 增 onDataChange 
属性 ， 以 便 在 表格 中 的 数据 内 容 发 生 改 变 时 通知 父 组 件 Whinepad。 















































Name Year Grape Rating Actions 


$2 chucks 2016 Merlot sos sake ok G) © 











6-10; Excel 组 件 





Whinepad 组 件 则 负责 搜索 功能 ，CRUD 中 的 C 部 分 (创建 新 条 目 ) 以 及 使 用 localstorage 
进行 数据 持久 化 存储 。( 在 实际 应 用 开发 中 ， 你 也 可 能 需要 把 数据 存储 在 服务 器 上 。) 


这 两 个 组 件 都 需要 使 用 schema 对 象 进行 数据 类 型 配置 。 
以 下 是 Excel 组 件 的 完整 实现 (和 第 3 章 的 版 本 类 似 ， 其 中 某 些 功能 稍 有 不 同 ) : 

















import Actions from './Actions'; 

import Dialog from './Dialog'; 

import Form from './Form'; 

import FormInput from './FormInput'; 

import Rating from './Rating'; 

import React, {Component, PropTypes} from 'react'; 
import classNames from 'classnames'; 


class Excel extends Component { 


constructor(props) { 
super (props); 
this.state = { 
data: this.props.initialData, 
sortby: null, // schema.id 
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descending: false, 
edit: null, // [row index, schema.id], 
dialog: null, // {type, idx} 
}; 
} 


componentWillReceiveProps(nextProps) { 
this.setState({data: nextProps.initialData}); 


} 


_fireDataChange(data) { 
this.props.onDataChange(data) ; 


} 


_sort(key) { 
let data = Array.from(this.state.data); 
const descending = this.state.sortby === key && !this.state.descending; 
data.sort(function(a, b) { 
return descending 
? (a[coLumn] < b[column] ? 1: -1) 
: (aLcolumn] > b[column] ? 1: -1); 


p; 
this.setState({ 
data: data, 


sortby: key, 

descending: descending, 
); 
this._fireDataChange(data); 


} 


_showEditor(e) { 
this.setState({edit: { 
row: parseInt(e.target.dataset.row, 10), 
key: e.target.dataset.key, 
H); 
} 


_save(e) { 
e.preventDefault(); 
const value = this.refs.input.getValue(); 
let data = Array.from(this.state.data); 
data[this.state.edit.row][this.state.edit.key] = value; 
this.setState({ 


edit: null, 

data: data, 
]); 
this._fireDataChange(data); 


} 


_actionClick(rowidx, action) { 
this.setState({dialog: {type: action, idx: rowidx}}); 


} 


_deleteConfirmationClick(action) { 
if (action === 'dismiss') { 
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this._closeDialog(); 

return; 
} 
let data = Array.from(this.state.data); 
data.splice(this.state.dialog.idx, 1); 
this.setState({ 

dialog: null, 


data: data, 
P; 
this._fireDataChange(data); 


} 


_closeDialog() { 
this.setState({dialog: null}); 
} 


_saveDataDialog(action) { 
if (action === 'dismiss') { 
this._closeDialog(); 
return; 
} 
let data = Array.from(this.state.data); 
data[this.state.dialog.idx] = this.refs.form.getData(); 
this.setState({ 
dialog: null, 


data: data, 
DE 
this._fireDataChange(data); 
} 
render() { 
return ( 
<div className="Excel"> 
{this._renderTable()} 
{this._renderDialog()} 
</div> 
); 
} 


_renderDialog() { 
if (!this.state.dialog) { 
return null; 
} 
switch (this.state.dialog.type) { 
case 'delete': 
return this._renderDeleteDialog(); 


case ‘info’: 

return this._renderFormDialog(true); 
case ‘edit': 

return this._renderFormDialog(); 
default: 


throw Error( Unexpected dialog type ${this.state.dialog.type}*); 
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_renderDeleteDialog() { 
const first = this.state.data[this.state.dialog.idx]; 
const nameguess = first[Object.keys(first)[0]]; 
return ( 
<Dialog 


> 


modal={true} 

header="Confirm deletion" 

confirmLabel="Delete" 
onAction={this._deleteConfirmationClick. bind(this) } 


{*Are you sure you want to delete "${nameguess}"?°} 


</Dialog> 


Js 
} 


_renderFormDialog(readonly) { 
return ( 
<Dialog 


modal={true} 

header={readonly ? 'Item info' : 'Edit item'} 
confirmLabel={readonly ? 'ok' : 'Save'} 
hasCancel={!readonly} 
onAction={this._saveDataDialog.bind(this)} 


<Form 
ref="form" 
fields={this.props.schema} 


initialData={this.state.data[this.state.dialog.idx]} 


readonly={readonly} /> 


</Dialog> 


); 
} 


_renderTable() { 
return ( 
<table> 


<thead> 
<tr>{ 
this.props.schema.map(item => { 
if (!item.show) { 
return null; 


} 
let title = item.label; 
if (this.state.sortby === item.id) { 
title += this.state.descending ? ' \u2191' 
} 
return ( 
<th 
className={*schema-${item.id}*} 
key={item.id} 
onClick={this._sort.bind(this, item.id)} 
> 
{title} 
</th> 
)3 


" \u2193'; 





}, this) 
} 
<th className="ExcelNotSortable">Actions</th> 
</tr> 
</thead> 
<tbody onDoubleClick={this._showEditor .bind(this)}> 
{this.state.data.map((row, rowidx) => { 
return ( 
<tr key={rowidx}>{ 
Object.keys(row).map((cell, idx) => { 
const schema = this.props.schema[idx]; 
if (!schema || !schema.show) { 
return null; 
} 
const isRating = schema.type === 'rating'; 
const edit = this.state.edit; 
let content = row[cell]; 
if (!isRating && edit && edit.row === rowidx && edit.key === 
schema.id) { 
content = ( 
<form onSubmit={this._save.bind(this)}> 
<FormInput ref="input" {...schema} defaultValue={con 
tent} /> 
</form> 
); 
} else if (isRating) { 
content = <Rating readonly={true} defaultValue={Num 
ber(content)} />; 


} 
return ( 
<td 
className={classNames({ 
[ ‘schema-${schema.id}*]: true, 
"ExcelEditable': !isRating, 
"ExcelDataLeft': schema.align === 'left', 
"ExcelDataRight': schema.align === 'right', 
"ExcelDataCenter': schema.align !== 'left' && 
schema.align !== 'right', 
DI} 
key={idx} 
data-row={rowidx} 
data-key={schema.id}> 
{content} 
</td> 
)3 
}, this)} 


<td className="ExcelDataCenter"> 
<Actions onAction={this._actionClick.bind(this, rowidx)} /> 


}, this)} 
</tbody> 
</table> 
)3 
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} 
} 


Excel.propTypes = { 
schema: PropTypes.array0f( 
PropTypes.object 
)， 
initialData: PropTypes.arrayOf( 
PropTypes.object 
Js 
onDataChange: PropTypes.func, 
}; 


export default Excel 
有 一 些 细 市 需要 详细 讨论 : 


render() { 
return ( 
<div className="Excel"> 
{this._renderTable()} 
{this._renderDialog()} 
</div> 
); 
} 


这 个 组 件 会 泻 染 一 个 表格 与 一 个 对 话 框 (是否 演 染 对 话 框 视 情况 而 定 )。 对 话 框 的 情况 多 
种 多 样 ， 包 括 弹出 确认 信息 (sure you want to delete?)、 编 辑 表单 、 在 表单 只 读 时 显示 条 目 
信息 。 对 话 框 在 默认 情况 下 不 会 显示 ， 可 以 通过 设置 this.state 的 dialog 属性 在 需要 时 











演 染 对 话 框 ， 状 态 变 化 将 会 导致 组 件 重新 泻 染 。 





当 用 户 点 击 <Action> 组 件 中 的 某 个 按钮 时 ， 你 需要 设置 diatog 属 


_actionClick(rowidx, action) { 
this.setState({dialog: {type: action, idx: rowidx}}); 


} 











PE: 


当 表格 中 的 数据 发 生变 化 时 (即使 用 this.setState({data: /**/}) 的 时 候 )， 你 需要 触发 


一 个 监听 改变 的 事件 ， 通 知 父 组 件 更 新 持久 化 存储 中 的 内 容 : 








_fireDataChange(data) { 
this.props.onDataChange(data); 
} 


反 向 通信 (从 父 组 件 Whinepad 到 子 组 件 Excel 之 间 的 通信 ) 会 在 父 组 件 改变 initialData 


属性 时 发 生 。Excel 组 件 可 以 通过 以 下 方法 响应 数据 变化 : 





componentWillReceiveProps(nextProps) { 
this.setState({data: nextProps.initialData}); 























如 何 创建 数据 条 目 (如 图 6-11 所 示 ) 或 一 个 数据 视图 (如 图 6-12 所 示 ) ?你 需要 打开 


|3 





个 包含 Form 组件 的 Dialog 对 话 框 。 表 单 中 的 数据 配置 来 源 于 schema， 而 数据 条 目的 内 容 





则 来 源 于 this.state.data, 


_renderFormDialog(readonly) { 


return ( 
<Dialog 
modal={true} 
header={readonly ? 'Item info' : 'Edit item'} 
confirmLabel={readonly ? 'ok' : 'Save'} 


hasCancel={! readonly} 
onAction={this._saveDataDialog.bind(this)} 


<Form 
ref="form" 
fields={this.props.schema} 
initialData={this.state.data[this.state.dialog.idx]} 
readonly={readonly} /> 
</Dialog> 
); 
} 





Edit item 


Name: 
$2 chuck's 


Year: 


2016 


Comments: 





Nice for the nrice1 














6-11; 编辑 数据 的 对 话 框 (CRUD 中 的 U) 
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Item info 


Name: 


$2 chuck's 


Year: 


Comments: 


Nice for the price‘ 











6-12; 数据 视图 对 话 框 


(CRUD 中 的 R) 


当 用 户 完成 编辑 后 ， 你 需要 更 新 状态 ， 并 把 变化 告知 订阅 者 : 


_saveDataDialog(ac 
if (action === ' 





tion) { 
dismiss') { 


this._closeDialog(); // 只 需要 把 this.state.dialog 设 置 为 空 


return; 


} 


let data = Array.from(this.state.data); 


data[this.state.dialog.idx] = this.refs.form.getData(); 


this.setState({ 
dialog: null, 
data: data, 


this. _fireDataCh 


} 
至 于 ES 的 新 语法 ， 这 是 








// 旧 语 法 


"Are you sure you 


// 新 语法 


ange(data); 





有 除了 模板 字符 


want to delete 


的 广泛 使 用 ， 并 没有 涉及 太 多 : 


+ Nameguess + "?" 


{*Are you sure you want to delete "${nameguess}"?°} 


此 外 还 要 注意 类 名 中 也 使 用 了 模板 字符 串 ， 








的 方式 自 定义 数据 表格 : 











大 





为 这 个 应 用 允许 你 在 schema 中 通过 添加 ID 

















// | 
<th 





语法 
CLas 











// 新 话 法 


sName={"schema- 


+ item.id}}> 


<th className={*schema-${item.id}*}> 





模板 字符 串 最 令 人 不 可 思议 的 用 法 ， 是 可 以 通过 中 括号 [] 用 作对 象 中 的 属性 名 。 虽 然 这 
与 React 本 身 没 有 关系 ， 但 当 你 看 到 如 下 用 法 时 ， 可 能 还 是 会 感到 有 些 奇怪 ; 
{ 
[ ‘schema-${schema.id}*]: true, 
"ExcelEditable': !isRating, 
"ExcelDataLeft': schema.align === 'left', 
"ExcelDataRight': schema.align === 'right', 
"ExcelDataCenter': schema.align !== 'left' && schema.align !== 'right', 
} 
6.5 <Whinepad> 


终于 到 了 最 后 一 个 组 们 





表格 组 件 简单 一 点 ， 依 赖 也 更 少 : 


import Button from 
import Dialog from 


import Excel from 
import Form from 


import React, {Component, PropTypes} from 


F， 也 就 是 所 有 组 件 的 父 组 件 (如 图 6-13 所 示 )。 这 个 组 件 比 Excel 


'./Button'; // <- MFR E 
'./Dialog'; // <- 用 于 弹出 添加 新 条 
'./Excel'; // <- 所 有 内 容 的 表格 容器 
'./Form'; // <- 添加 新 ea 


"react' 








目的 对 话机 


TAT 

















Add new item 


au CD 








6-13: Whinepad 负责 


CRUD 中 的 C 
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ay 


只 需 接收 两 个 属性 : schema 数据 配置 和 初始 数据 : 


这 个 组 介 





Whinepad.propTypes = { 
schema: PropTypes.array0f( 
PropTypes.object 
Js 
initialData: PropTypes.arrayOf( 
PropTypes.object 
J3 
J; 


export default Whinepad; 

















如 果 你 已 经 仔细 阅读 了 Excel 组 件 的 实现 逻辑 ， 这 个 组 件 对 你 来 说 应 该 不 太 困 难 : 
class Whinepad extends Component { 


constructor(props) { 
super(props); 
this.state = { 
data: props.initialData, 
addnew: false, 
}; 
this._preSearchData = null; 


} 


_addNewDialog() { 
this.setState({addnew: true}); 


} 
_addNew(action) { 
if (action === 'dismiss') { 
this.setState({addnew: false}); 
return; 
} 


let data = Array.from(this.state.data); 
data.unshift(this.refs.form.getData()); 
this.setState({ 

addnew: false, 


data: data, 
}) 
this._commitToStorage(data) ; 


} 


_onExcelDataChange(data) { 
this.setState({data: data}); 
this._commitToStorage(data) ; 


} 


_commitToStorage(data) { 
localStorage.setItem('data', JSON.stringify(data)); 


} 


_startSearching() { 
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this._preSearchData = this.state.data; 


} 


_doneSearching() { 
this.setState({ 
data: this._preSearchData, 
p; 
} 


_search(e) { 
const needle = e.target.value. toLowerCase(); 
if (!needle) { 
this.setState({data: this._preSearchData}); 
return; 
} 
const fields = this.props.schema.map(item => item.id); 
const searchdata = this._preSearchData.filter(row => { 
for (let f = 0; f < fields.length; f++) { 
if (row[fields[f]].toString().toLowerCase().indexOf(needle) > -1) { 
return true; 
} 
} 
return false; 
}); 
this.setState({data: searchdata}); 


} 


render() { 
return ( 
<div className="Whinepad"> 
<div className="WhinepadToolbar"> 
<div className="WhinepadToolbarAdd"> 
<Button 
onClick={this._addNewDialog.bind(this)} 
className="WhinepadToolbarAddButton"> 
+ add 
</Button> 
</div> 
<div className="WhinepadToolbarSearch"> 
<input 
placeholder="Search..." 
onChange={this._search.bind(this)} 
onFocus={this._startSearching.bind(this) } 
onBlur={this._doneSearching.bind(this)} /> 
</div> 
</div> 
<div className="WhinepadDatagrid"> 
<Excel 
schema={this.props.schema} 
initialData={this.state.data} 
onDataChange={this._onExcelDataChange.bind(this)} /> 
</div> 
{this.state.addnew 
? <Dialog 
modal={true} 





构建 应 用 


133 


header="Add new item" 
confirmLabel="Add" 
onAction={this._addNew.bind(this) } 
> 
<Form 
ref="form" 
fields={this.props.schema} /> 
</Dialog> 
: null} 
</div> 
); 
} 


} 


要 注意 组 件 通过 onDataChange 注册 来 监听 Excel 组 件 中 的 数据 变化 。 
只 是 简单 地 存储 在 LocalStorage 中 : 











_commitToStorage(data) { 


localStorage.setItem('data', JSON.stringify(data)); 
} 


还 要 知道 所 有 数据 都 


此 处 也 可 以 发 起 任何 异步 请 求 ( 即 XHR、XMLHttpRequest、Ajax) ， 把 数据 保存 在 服务 
端 ， 而 不 仅 是 保存 在 客户 端 。 


6.6 ”总结 


KEH 





F 也 不 是 模块 ， 它 没有 





F 始 就 提 到 ， 应 用 的 主 入 口 文件 是 app.js。 这 个 文件 既 不 是 组 伯 


输出 任何 内 容 。 它 的 作用 仅仅 是 进行 初始 化 工作 一 一 从 localstorage 中 读 取 已 存在 的 数 
据 ， 并 配置 <Whinepad> 组 件 : 


"use strict'; 


import Logo from './components/Logo'; 

import React from 'react'; 

import ReactDOM from 'react-dom'; 

import Whinepad from './components/Whinepad'; 
import schema from './schema'; 


let data = JSON.parse(localStorage.getItem('data')); 


// 如 果 LocaLStorage 中 没有 数据 , 则 从 schema 中 读 取 默认 的 示例 数据 
if (!data) { 

data = {}; 

schema.forEach(item => data[item.id] = item.sample); 

data = [data]; 
} 








ReactDOM. render ( 
<div> 
<div className="app-header"> 





<Logo /> Welcome to Whinepad! 
</div> 
<Whinepad schema={schema} initialData={data} /> 
</div>, 
document.getELementById('pad') 
); 


至 此 ， 这 个 应 用 就 完成 了 。 你 可 以 到 http://whinepad.com 进行 体验 ， 并 在 https://github.com/ 
stoyan/reactbook/ 训 览 完整 代码 。 
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第 7 章 


lint、Flow、 测 试 与 复 验 














随后 的 第 8 章 将 会 介绍 Flux， 它 是 管理 组 件 间 通 信 的 另 一 种 选择 (用 于 代替 onDataChange 
这 样 的 方法 )。 届 时 我 们 需要 对 代码 进行 一 点 重 构 。 如 果 在 重 构 时 能 尽 可 能 地 避免 错误 的 
发 生 ， 不 是 更 好 吗 ? 在 本 章 中 ， 我 们 将 介绍 几 个 工具 ， 帮 助 你 在 应 用 规模 不 可 避免 地 增长 
时 保持 头脑 清醒 。 这 些 工 具 就 是 ESLint、Flow 和 Jest。 














不 过 ， 使 用 它们 的 共同 前 提 是 配置 package.json 文件 。 


7.1 package.json 

前 面 提 到 过 使 用 npn 安装 第 三 方 库 与 工具 的 方法 。 除 此 之 外 ，npm 还 允许 你 把 项 目 打 包 并 
共享 到 http://npmjs.com, 让 其 他 用 户 可 以 通过 npm 安装 你 的 软件 包 。 然 而 ， 你 不 一 定 非 要 
把 代码 上 传 到 npmjs.com 才能 利用 npm 提供 的 一 些 便利 之 处 。 





F 

















打包 工作 是 围绕 package.json 文件 进行 的 ， 你 可 以 把 该 文件 放 在 项 目 根 目录 ， 并 在 该 文件 
中 配置 依赖 与 其 他 附加 工具 。 该 文件 拥有 非常 丰富 的 可 配置 选项 (参见 https://docs.npmjs. 
com/files/package.json 获取 完整 内 容 )， 但 我 们 首先 需要 关心 如 何 使 用 这 个 文件 ， 并 编写 最 
小 限度 的 必要 配置 。 


在 应 用 目录 中 新 建 一 个 文件 ， 命 名 为 package.json: 








$ cd ~/reactbook/whinepad2 
$ touch package.json 


在 文件 中 添加 以 下 内 容 : 
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"name": "whinepad", 
"version": "2.0.0", 


} 
准备 工作 完成 了 。 接 下 来 ， 只 需要 往 该 文件 中 不 断 添加 更 多 配置 项 即 可 。 





7.1.1 配置 Babel 


在 第 5 章 中 ，build.sh 通过 以 下 命令 运行 Babel: 





$ babel --presets react,es2015 js/source -d js/build 
你 可 以 把 命令 中 的 预 设 配置 转移 到 package.json 文件 中 ， 从 而 简化 该 命令 : 


{ 
"name": "whinepad", 
"version": "2.0.0", 
"babel": { 
"presets": [ 
"es2015", 
"react" 
] 
}, 
} 


现在 只 需要 输入 以 下 命令 即 可 运行 Babel: 


$ babel js/source -d js/build 





Babel (以 及 JavaScript 生态 圈 中 的 很 多 工具 ) 会 检查 package.json 文件 是 否 存在 ， 如果 存 
在 ， 就 从 该 文件 中 读 取 配置 选项 。 


7.1.2 脚本 


NPM 允许 你 在 package.json 中 配置 脚本 ， 并 通过 npm run scriptname 的 方式 运行 指定 脚 
本 。 举 个 例子 ， 我 们 把 第 5 章 ./scripts/watch.sh 中 的 一 行 命令 移 到 package.json 中 : 


oa 














{ 
"name": "whinepad", 
"version": "2.0.0", 
"babel": {/* ... */}, 
"scripts": { 
"watch": "watch \"sh scripts/build.sh\" js/source css/" 
} 
} 


要 运行 这 个 构建 脚本 ， 可 以 通过 
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# 过 去 
$ sh ./scripts/watch.sh 


# 现在 

$ npm run watch 
如 果 你 想 继续 改进 这 些 脚本 的 话 ， 可 以 通过 相同 的 方式 ， 把 build.sh 的 内 容 移动 到 
package.json 中 。 你 也 可 以 选择 使 用 某 个 构建 工具 〈 比 如 Grunt, Gulp 等 )， 它 们 也 可 以 通 
过 package.json 进行 配置 。 但 本 书 只 讨论 与 React 相关 的 话题 ， 此 处 不 展开 讨论 。 目 前 我 
们 已 经 总 结 了 关于 package.json 文件 需要 掌握 的 所 有 内 容 。 











7.2 ESLint 


ESLint (http://eslint.org/) 是 一 个 JavaScript 和 JSX 检查 工具 ， 可 以 帮助 你 检查 代码 中 的 潜 
在 问题 。 此 外 ，ESLint 还 可 以 帮助 你 检查 代码 一 致 性 ， 比 如 缩 进 与 空格 的 使 用 。 这 个 工具 
还 可 以 检查 拼写 错误 以 及 未 使 用 的 变量 。 在 理想 情况 下 ，ESLint 除了 作为 构建 过 程 中 的 一 
部 分 ， 还 应 该 被 整合 到 你 的 源 代 码 控制 系统 以 及 代码 编辑 器 中 ， 以 保证 ESLint 最 大 限度 地 
提醒 你 少 犯 错误 。 











7.2.1 安装 


除了 ESLint 本 身 ， 你 还 需要 安装 React 和 Babel 的 插件 ， 用 于 帮助 ESLint 识别 
ECMAScript 的 最 新 语法 ， 以 及 从 JSX 与 React 的 特定 “规则 ”中 受益 : 


$ npm i -g eslint babel-eslint eslint-plugin-react eslint-plugin-babel 


然后 在 package.json 文件 中 添加 esLintConfig 配置 : 








{ 
"name": "whinepad", 
"version": "2.0.0", 
"babel": {}, 


"scripts": {}, 
"eslintConfig": { 
"parser": "babel-eslint", 
"plugins": [ 
"babel", 
"react" 
], 
} 
} 


7.2.2 ”运行 
对 单个 文件 运行 检查 工具 的 命令 如 下 : 








fe 
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$ eslint js/source/app.js 


想 状 况 下 ， 这 条 命令 应 该 不 会 提示 错误 信息 。 这 意味 着 ESLint 可 以 正常 识别 ISK 以 及 


ie 但 是 这 还 不 够 好 ， 因为 目前 检查 工具 偿 设 有 验证 任何 规则。 ESLint 





会 根 


据 预 先 定 义 的 规则 逐一 检查 每 项 内 容 。 在 起 步 阶 段 ， 你 可 以 (通过 extend) 使 用 ESLint 内 


置 的 一 些 规则 : 
"eslintConfig": { 
"parser": "babel-eslint", 
"plugins": [], 
"extends": "eslint: recommended" 


} 
再 次 运行 该 命令 ， 你 会 得 到 一 些 错误 提示 信息 :; 
$ eslint js/source/app.js 
/Users/stoyanstefanov/reactbook/whinepad2/js/source/app. js 
4:8 error "React" is defined but never used no-unused-vars 
9:23 error "localStorage" is not defined no-undef 


25:3 error "document" is not defined no-undef 


% 3 problems (3 errors, 0 warnings) 


第 二 条 和 第 三 条 错误 信息 都 是 关于 未 声明 的 变量 (来 源 于 规则 no-undef) ， 但 实际 上 这 些 
变量 都 是 可 以 在 浏览 器 中 全 局 访问 的 。 因此 可 以 通过 在 esLintConfig 中 增加 配置 项 ， 以 修 





























复 该 问题 
"env": { 
"browser": true 
} 
第 一 条 错误 信息 和 React 相关 。 虽 然 你 的 确 需 要 引入 React, {HMA ESLint 的 角度 看 来 ， 这 
似乎 是 一 个 没有 使 用 过 的 变量 ， 因 此 没有 必要 存在 。 借 助 eslint-plugin-react 中 的 一 条 
规则 可 以 解决 这 个 问题 : 
"rules": { 
"react/jsx-uses-react": 1 
} 
接 下 来 检查 schema js 文件 ， 你 会 得 到 另 一 种 类 型 的 错误 信息 : 
$ eslint js/source/schema.js 
/Users/stoyanstefanov/reactbook/whinepad2/js/source/schema. js 
9:18 error Unexpected trailing comma comma-dangle 
16:17 error Unexpected trailing comma comma-dangle 
25:18 error Unexpected trailing comma comma-dangle 
32:14 error Unexpected trailing comma comma-dangle 
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38:33 error Unexpected trailing comma comma-dangle 
39:4 error Unexpected trailing comma comma-dangle 


% 6 problems (6 errors, © warnings) 


末尾 逗号 《比如 Let a = [1,]， 而 非 let a = [1]) 有 时 是 不 好 的 (因为 在 某 些 老 版 本 的 浏 
览 器 中 ， 末 尾 逗 号 会 导致 语法 错误 ) ， 但 是 保留 末尾 逗号 也 能 带 来 一 些 便利 ， 因 为 其 有 助 于 
源 代码 控制 系统 追溯 (blame) 提交 历史 ， 并 且 方 便 修改 文件 。 通 过 对 配置 文件 进行 一 点 改 
动 ， 可 以 让 (在 数组 或 对 象 占据 了 多 行 的 情况 下 ) 总 是 使 用 末尾 逗号 变 成 一 种 好 的 做 法 : 




















"rules": { 
"comma-dangle": [2, "always-multiline"], 
"react/jsx-uses-react": 1 


3 


7.2.3 ”规则 列表 


要 获取 完整 的 规则 列表 ， 可 以 在 本 书 附带 的 代码 库 (https://github.com/stoyan/reactbook/) 
中 找到 。 这 份 规则 (本 书 项 目 遵 循 的 规则 ) 也 是 React 库 的 源 代 码 本 身 遵 循 的 规则 列表 。 














最 后 把 语法 检查 命令 添加 到 build.sh 脚本 中 。 这 样 做 可 以 让 ESLint 在 构建 时 帮助 你 检查 代 
码 ， 以 保证 维持 代码 的 高 质量 : 


# QA 
eslint js/source 


7.3 Flow 


Flow (http://flowtype.org) 是 针对 JavaScript 的 静态 类 型 检查 工具 。 总 体 而 言 ， 人 们 对 于 类 
型 有 两 种 分 化 的 意见 ， 特 别 是 在 JavaScript 领域 。 


一 些 人 喜欢 自己 的 代码 得 到 监控 ， 确 保 程序 处 理 的 是 正确 的 数据 。 就 像 语法 检查 和 单元 测 
试 那样 ， 自 动 检测 代码 可 以 确保 正确 处 理 数据 ， 在 一 定 程度 上 保证 你 不 会 遗漏 一 些 未 检查 
(或 者 自 认 为 没有 问题 ) 的 代码 。 随 着 应 用 规模 和 开发 人 员 的 不 断 增 长 ， 类 型 检查 显得 愈 
发 重要 。 


另 一 些 人 则 喜欢 JavaScript 这 种 动态 、 弱 类 型 的 语言 ， 认 为 类 型 检测 会 带 来 更 多 麻烦 ， 因 
为 有 时 候 需 要 进行 类 型 转换 。 

当然 ， 是 否 需 要 安装 这 个 工具 完全 取决 于 你 和 你 的 团队 。 如 果 你 有 兴趣 ， 不 妨 党 试探 索 
一 下 。 





















































7.3.1 安装 


$ npm install -g flow-bin 
$ cd ~/reactbook/whinepad2 
$ flow init 


init 命令 会 在 你 的 目录 中 创建 一 个 空 的 .towconfig 配置 文件 。 在 该 文件 中 的 ignore 和 
include 部 分 添加 如 下 内 容 : 





[ignore] 
.*/react/node_modules/.* 


[include] 
node_modules/react 
node_modules/react-dom 
node_modules/classnames 


[libs] 
[options ] 


CD 


7.3.2 ”运行 
要 运行 Fow， 只 需要 输入 : 


$ flow 


要 检查 单个 文件 或 目录 ， 可 以 输入 : 








$ flow js/source/app.js 


最 后 ， 把 命令 添加 到 构建 脚本 中 ， 作 为 质量 保证 (quality assurance, QA) 过 程 的 一 部 分 : 








# QA 
eslint js/source 
flow 


7.3.3 注册 类 型 检查 

要 让 Flow 对 你 的 文件 进行 类 型 检查 ， 需 要 在 文件 顶部 的 第 一 个 注释 中 添加 @flow 标记 。 
如 果 没 有 在 文件 中 添加 该 标记 ，Flow 就 会 忽略 这 个 文件 。 也 就 是 说 ， 类 型 检查 完全 是 可 
选 的 。 


我 们 从 上 一 章 中 最 简单 的 一 个 组 件 开 始 检查 ， 即 <Button> 组 件 : 





/* @flow */ 


import classNames from 'classnames'; 
import React, {PropTypes} from 'react'; 
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Const Button = props => 


props . 


href 


? <a {...props} className={classNames('Button', props.className)} /> 
: <button {...props} className={classNames('Button', props.className)} /> 


Button 
href: 


}; 


.propTypes = { 


PropTypes.string, 


export default Button 


运行 Flow : 


$ flow 


js/source/components/Button. js 


js/source/components/Button. js:6 


6: co 


Found 1 


出 现 了 一 个 错误 ， 但 这 是 好 事 


nst Button = props => 
AAAAN parameter ‘props’. Missing annotation 


error 

















sb 








会 让 代码 变 得 更 好 了 ! Flow 的 检查 结果 








显示 props 参数 缺少 注解 。 





比如 对 于 下 





四 这 个 函数 : 








functio 
retur 


} 
Flow 希望 你 其 


functio 
retur 


} 
从 而 避免 最 终 


sum('1' 


n sum(a, b) { 
na+b; 





其 添加 注解 : 


n sum(a: number, b: number): number { 
na+b; 


不 能 得 到 预期 的 结果 : 


+ 2); // "12" 


7.3.4 修复 <Button> 
我 们 的 函数 中 接收 的 props 参数 应 该 是 一 个 对 象 。 因 此 你 可 以 这 样 修改 : 


const B 





utton = (props: Object) => 


现在 Flow 就 不 会 报错 了 : 


$ flow 
No erro 


js/source/components 
rs! 





| 全 A 


第 7 章 


虽然 注解 为 对 象 类 型 Object 是 有 效 的 ， 但 你 可 以 做 得 更 加 具体 ， 创 建 一 个 自 定义 类 型 ， 并 
指明 对 象 中 包含 的 属性 与 类 型 : 








type Props = { 
href: ?string, 


Js 


const Button = (props: Props) => 
props.href 
? <a {...props} className={classNames('Button', props.className)} /> 
: <button {...props} className={classNames('Button', props.className)} /> 


export default Button 


如 你 所 见 ， 切 换 到 自 定义 类 型 后 ，Flow 就 取代 了 React 中 propTypes 定义 的 作用 。 这 意 
味 着 : 


。 不 需要 在 运行 时 进行 类 型 检查 ， 有 助 于 加 快运 行 速度 ; 
。 可 以 减少 发 送 到 客户 端的 代码 量 (减少 字 节 数 )。 





此 外 ， 把 属性 类 型 放 回 组 件 顶 部 可 以 方便 我 们 直接 把 这 段 定 义 看 作 组 件 的 文档 说 明 。 
在 href: ?string 中 的 问号 表示 这 个 属性 可 以 为 空 。 


fn] 








既然 我 们 不 需要 再 使 用 propTypes, ESLint 会 提醒 我 们 变量 PropTypes 未 被 
使 用 。 因 此 需要 将 import React, {PropTypes} from 'react'; 改 为 import 
React from 'react';, 
ESLint A— H KIRE, FRB Bee ER. SCE AE Be 
觉 到 开发 体验 更 棒 了 ? 

















再 次 运行 Fow， 你 会 得 到 另 一 个 错误 : 


$ flow js/source/components/Button. js 
js/source/components/Button. js:12 
12: ? <a {...props} className={classNames('Button', props.className)} /> 
八 八 八 八 八 八 八 八 八 
property `className`. 
Property not 
found in 
12: ? <a {...props} className={classNames('Button', props.className)} /> 
AAAAA Object type 


这 里 的 问题 是 Flow 不 知道 在 props 对 象 中 存在 className 属性 ， 因 为 我 们 在 自 定义 类 型 
Props 中 没有 指明 该 属性 。 要 解决 这 个 问题 ， 需 要 把 className 添加 到 类 型 中 : 




















type Props = { 
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href: ?string, 
className: ?string, 


F 


7.3.5 app.js 
对 主 文件 appjs 运行 检查 ， 会 得 到 如 下 错误 : 


$ flow js/source/app.js 
js/source/app.js:11 
11: let data = JSON.parse(localStorage.getItem('data')); 
ANAAAAAAAAAAAANANAAAAARAAANANAAAASN call of method “getItem 
11: let data = JSON.parse(localStorage.getItem('data')); 
ANAAAAAAAARAAAAANAAAAAAAAANAAARASN null. This type is 
incompatible with 
383: static parse(text: string, reviver?: (key: any, value: any) => any): 
any; 
AAAAAN string. See Lib: /private/tmp/flow/flow 
Lib_28f8ac7e/core. js:383 





Flow 要 求 你 只 能 传递 字符 串 到 ISON. parse() 函数 中 ， 并 且 帮 你 指出 了 parse() 函数 所 在 的 
位 置 。 由 于 localStorage.getItem 可 能 会 返回 nuLL， 这 是 不 可 接受 的 。 一 种 简单 的 解决 方 
案 是 添加 默认 值 ; 





let data = JSON.parse(localStorage.getItem('data') || ''); 
Skit, JSON.parse('') 会 在 浏览 器 中 导致 错误 (尽管 这 种 写法 可 以 通过 类 型 检查 )， 因 为 空 


字符 串 不 是 合法 的 ISON 编码 字符 串 。 因 此 ， 需 要 修改 这 段 代码 才能 在 满足 Flow 进行 类 
型 检测 的 同时 避免 浏览 器 报错 。 








你 可 能 会 发 现 处 理 类 型 问题 还 挺 烦人 的 ， 但 好 处 是 Flow 会 让 你 好 好 思考 值 传 递 中 的 问题 。 
在 app.js 文件 中 的 相关 代码 是 : 
let data = JSON.parse(localStorage.getItem('data')); 


// 从 schema 中 读 取 默认 示例 数据 

if (!data) { 
data = {}; 
schema. forEach((item) => data[item.id] = item.sample); 
data = [data]; 

} 





这 段 代 码 中 的 另 一 个 问题 是 ，data 一 开始 是 数组 ， 然 后 变 成 了 对 象 ， 最 后 又 变 回 数组 。 虽 
PR JavaScript 允许 你 这 样 做 ,但 这 似乎 是 一 种 反 模 式 一 一 中 途 改 变 变量 类 型 。 实 际 上 ， 浏 
览 器 内 部 的 JavaScript 引擎 会 设置 变量 类 型 ， 目 的 是 优化 代码 。 因 此 当 你 中 途 改变 变量 类 
型 时 ， 浏 览 器 的 优化 就 不 起 作用 了 ， 这 样 做 可 不 好 。 








接 下 来 我 们 一 起 修复 这 些 问题 。 
可 以 更 严格 地 限制 data 变量 ， 并 将 其 注解 为 一 个 对 象 数组 : 








let data: Array<Object>; 














然后 把 从 数据 存储 中 读 取出 来 的 变量 称 为 storage， 甚 类 型 为 字符 串 〈 也 可 能 为 null, 
此 需要 在 前 面 加 上 问号 ) : 





W 





const storage: ?string = localStorage.getItem('data'); 


当 storage 为 字符 串 时 ， 只 需要 直接 解析 就 可 以 了 。 否 则 ， 你 需要 设置 data 为 数组 类 型 ， 
并 把 示例 数据 填充 到 数组 的 第 一 个 元 素 中 : 





if (!storage) { 

data = [{}]; 

schema. forEach(item => data[@][item.id] = item.sample); 
} else { 

data = JSON.parse(storage); 
} 


现在 这 两 个 文件 都 已 经 兼容 Flow 了 。 为 了 节省 篇 幅 ， 不 再 列 出 所 有 经 过 兼容 处 理 的 代码 ， 
接 下 来 我 们 将 关注 Flow 的 几 个 更 加 有 趣 的 特性 。 本 书 附带 的 代码 库 (https://github.com/ 
stoyan/reactbook/) 中 包含 了 完整 代码 。 
































7.3.6 ”关于 props 和 state 类 型 检查 的 更 多 内 容 
当 你 使 用 无 状态 函数 创建 React 组 件 时 ， 可 以 像 之 前 看 到 的 那样 ， 为 props 参数 加 上 注解 : 





type Props = {/* ... */}; 
const Button = (props: Props) => {/* ... */}3 


类 构造 函数 与 之 类 似 : 


type Props = {/* ... */}; 
class Rating extends Component { 
constructor(props: Props) {/* ... */} 


} 




















但 如 果 不 使 用 构造 函数 呢 ? 比如 这 样 : 





class Form extends Component { 
getData(): Object {} 
render() {} 

} 
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在 这 种 情况 下 ， 可 以 使 用 ECMAScript 的 类 属性 功能 : 


type Props = {/* ... */}; 
class Form extends Component { 
props: Props; 
getData(): Object {} 
render() {} 








在 本 书 编写 时 ， 类 属性 还 没有 被 正式 纳入 ECMAScript 标准 ， 不 过 好 在 Babel 
提供 了 支持 最 新 特性 的 stage-0 预 设 。 在 使 用 前 ， 你 需要 安装 babel-preset- 
stage-0 这 个 NPM 包 ， 并 更 新 package.json 文件 中 的 Babel 配置 : 











{ 
"babel": { 
"presets": [ 
"es2015", 
"react", 
"stage-0" 
] 
} 
} 


类 似 地 ， 你 可 以 注解 组 件 中 的 state， 并 把 类 型 定义 放 在 组 件 代码 的 顶部 。 除 了 有 助 于 类 型 
检查 ，state 定义 前 置 还 可 以 作为 组 件 的 文档 使 用 ， 帮 助 你 定位 组 件 的 bug。 例 如 : 





type Props = { 
defaultValue: number, 
readonly: boolean, 
max: number, 


J; 


type State = { 
rating: number, 
tmpRating: number, 


J; 


class Rating extends Component { 
props: Props; 
state: State; 
constructor (props: Props) { 
super (props); 
this.state = { 
rating: props.defaultVaLue, 
tmpRating: props.defauLltVaLlue, 
}; 
} 
} 


当然 ， 你 也 应 该 尽 可 能 地 利用 这 个 自 定义 的 类 型 ; 








componentWillReceiveProps(nextProps: Props) { 
this.setRating(nextProps.defaultValue) ; 
} 


i= 已 SHE FFI 

7.3.7 导出 /导入 类 型 

接 下 来 看 一 下 <FornInput> 组 件 ; 
type FormInputFieldType = 'year' | 'suggest' | 'rating' | 'text' | 'input'; 
export type FormInputFieldValue = string | number; 


export type FormInputField = { 
type: FormInputFieldType, 
defaultValue?: FormInputFieldValue, 
id?: string, 
options?: Array<string>, 
label?: string, 

J; 


class FormInput extends Component { 
props: FormInputField; 
getValue(): FormInputFieldValue {} 
render() {} 

} 





在 这 段 代 码 中 ， 你 可 以 看 到 注解 是 如 何 配置 可 选 值 的 ， 其 作用 类 似 于 React 中 的 oneof() 
属性 类 型 。 





pe 


尔 还 可 以 看 到 如 何 把 一 种 自 定义 类 型 (FormInputFieldType) 作为 另 一 种 自 定义 类 型 
(FormInputField) 的 一 部 分 。 





最 后 需要 导出 (export) 这 些 类 型 。 这 样 做 的 话 ， 当 另 一 个 组 件 使 用 同一 种 类 型 时 ， 就 不 
需要 再 重新 定义 了 ， 只 需要 导入 (import) 该 组 件 导出 的 类 型 即 可 。 下 面 的 例子 展示 了 
<Form> 组 件 如 何 使 用 <FormInput> 提供 的 类 型 : 








import type FormInputField from './FormInput'; 


type Props = { 
fields: Array<FormInputField>, 
initialData?: Object, 
readonly?: boolean, 


J; 








实际 上 ， 表 单 需 要 同时 使 用 FormInput 中 的 两 种 类 型 ， 因 此 可 以 这 样 写 


import type {FormInputField, FormInputFieldValue} from './FormInput'; 
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7.3.8 ”类 型 转换 
Flow 允许 你 为 值 指 定 一 个 不 同 于 Fow 所 推导 出 的 类 型 。 举 个 例子 ， 你 在 事件 处 理 函 数 


中 接收 一 个 事件 对 象 ， 而 Flow 推导 出 事件 的 target 属性 类 型 和 你 的 预想 有 出 人。 思 芳 
Excel 组 件 中 的 这 段 代 码 : 








_showEditor(e: Event) { 
const target = e.target; 
this.setState({edit: { 
row: parseInt(target.dataset.row, 10), 
key: target.dataset.key, 
}}); 
} 


使 用 这 种 写法 时 ，Flow 会 提示 错误 : 


js/source/components/Excel.js:87 
87: row: parseInt(target.dataset.row, 10), 
AAAAAAN property ‘dataset’. Property not found 
in 
87: row: parseInt(target.dataset.row, 10), 
AAAAAN EventTarget 
js/source/components/Excel.js:88 


88: key: target.dataset.key, 
AAAAAAN property ‘dataset’. Property not found in 
88: key: target.dataset.key, 


AAAAAN EventTarget 


Found 2 errors 














如 果 你 阅读 Flow 的 源 代码 中 关于 DOM 对 象 的 定义 (https://github.com/facebook/flow/blob/ 
master/lib/dom.js), ZRH EventTarget 类 型 没有 包含 dataset 属性 ， 但 HTMLELement 类 型 
却 包含 了 该 属性 。 因 此 进行 类 型 转换 来 解决 该 问题 : 





ua 





const target = ((e.target: any): HTMLElement); 








F RRT RES it x BIE A ATER, (EAE RT APE 7 A SQ a A S BE RR 
的 值 、 冒 号 和 类 型 。 这 个 语法 能 让 类 型 为 A 的 值 变 成 类 型 B。 在 这 个 例子 中 ， 值 本 身 没 有 
发 生变 化 ， 但 是 由 any 类 型 变 为 了 HTMLELement 类 型 。 

















7.3.9 invariant 
在 Excel 组 件 中 ， 使 用 两 个 状态 属性 跟踪 用 户 是 否 正在 编辑 一 个 单元 格 以 及 对 话 框 是 否 


显示 : 


this.state = { 


Ties 





edit: null, // {row index, schema.id}, 
dialog: null, // {type, idx} 
J}; 


这 两 个 属性 值 可 能 是 null (没有 进入 编辑 状态 ， 对 话 框 不 显示 )， 也 可 能 是 包含 了 编辑 或 





对 话 框 信息 的 对 象 。 因 此 ， 这 两 个 属性 的 类 型 如 下 : 





type EditState = { 
row: number, 
key: string, 


}; 


type DialogState = { 
idx: number, 
type: string, 
J}; 


type State = { 
data: Data, 
sortby: ?string, 
descending: boolean, 
edit: ?EditState, 
dialog: ?DialogState, 
J}; 


目前 代码 中 大 致 存在 的 问题 是 ， 这 些 值 有 时 候 为 nuLL， 有 时 候 不 为 nuLL。RFlow 会 对 此 有 
些 疑 问 ， 事 实 上 这 也 是 有 道理 的 。 当 你 试图 使 用 this.state.edit.row 或 者 this.state. 











edit.key It, Flow 会 提示 错误 : 


Property cannot be accessed on possibly null value 





虽然 你 知道 只 有 当 它 们 可 用 时 才 会 调用 它们 ， 但 Flow 并 不 能 判断 这 种 情况 。 随 着 应 用 增 
长 ， 你 也 难以 保证 以 后 不 会 忽略 某 些 难以 预料 的 状态 。 因 此 ， 当 这 种 情况 发 生 时 ， 最 好 还 
是 加 以 注意 。 要 解决 Flow 的 报错 ， 并 在 应 用 出 现 问 题 时 及 时 抛 出 异常 ， 你 可 以 通过 以 下 





方式 检查 代码 中 的 所 有 非 空 值 。 
修改 前 : 
data[this.state.edit.row][this.state.edit.key] 
修改 后 : 
if (!this.state.edit) { 


throw new Error('Messed up edit state'); 


} 


data[this.state.edit.row][this.state.edit.key] 





value; 


value; 


SLE lee CAS RF, TEAR AS AE ABARI EA AER, PRAEH invariant() 
国 数 替代 这 种 写法 。 既 可 以 选择 自己 实现 该 国 数 ， 也 可 以 使 用 已 有 的 开源 代码 包 。 
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通过 NPM 安装 invariant, 
$ npm install --save-dev invariant 


然后 在 flowconfig 中 添加 配置 : 





[include] 
node_modules/react 
node_modules/react-dom 
node_modules/classnames 
node_modules/invariant 


现在 调用 该 函数 : 


invariant(this.state.edit, 'Messed up edit state'); 
data[this.state.edit.row][this.state.edit.key] = value; 


7.4 测试 


要 确保 稳健 地 改进 应 用 ， 接 下 来 需要 关注 自动 化 测试 。 提 到 测试 这 个 话题 ， 依 然 有 很 多 开 
源 项 目 可 供 选 择 。React 库 使 用 了 Jest 工具 (http://facebook.github.io/jest/) 进行 测试 ， 因 
此 我 们 选择 介绍 Jest， 看 它 对 我 们 有 什么 帮助 。 此 外 ，React 还 提供 了 一 个 名 为 react- 
addons-test-utils 的 插件 包 ， 可 以 配合 你 进行 测试 工作 。 

















首先 进行 安装 配置 。 


7.4.1 安装 

安装 Jest 的 命令 行 界面 : 
$ npm i -g jest-cli 

此 外 还 需 安装 babel-jest (让 你 可 以 使 用 ES6 风格 编写 测试 ) 以 及 React 的 测试 工具 包 : 
$ npm i --save-dev babel-jest react-addons-test-utils 

接 下 来 ， 更 新 package.json: 


{ 
[E aaa *] 
"eslintConfig": { 
| carer E | 
"env": { 
"browser": true, 
"jest": true 
}, 
[Rca] 


"scripts": { 
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"watch": "watch \"sh scripts/build.sh\" js/source js/_ tests_ css/", 
"test": "jest" 


jest": { 
"scriptPreprocessor": "node_modules/babel- jest", 
"unmockedModulePathPatterns": [ 
"node_modules/react", 
"node_modules/react-dom", 
"node_modules/react-addons-test-utils", 
"node_modules/fbjs" 
] 
} 
} 








现在 你 可 以 在 命令 行 直接 运行 Jest: 
$ jest testname.js 
也 可 以 通过 npm 运行 : 
$ npm test testname.js 
Jest 会 在 名 为 _tests__ 的 文件 夹 中 寻找 测试 用 例 ， 因 此 我 们 在 js/—tests_ 目录 中 编写 
测试 。 
后 修改 构建 脚本 ， 每 次 构建 时 都 需要 运行 lint 以 及 测试 


# QA 

eslint js/source js/__tests__ 
flow 

npm test 


pean watch.sh, LAWS YT MIA A se PA SCPE Ee (GI TRIE package.json 文件 中 重 
复 编 写 过 个 功能 ) i 








watch "sh scripts/build.sh" js/source js/__tests__ css/ 


7.4.2 AM 

Jest 是 基于 流行 的 测试 框架 Jasmine 构建 的 ， 而 Jasmine 的 API 命名 比较 口语 化 ， 简 洛 易 
懂 。 一 开始 ， 你 需要 通过 describe('suite', callback) 定义 测试 套件 (test suite) ， 在 套件 
中 通过 ue test name’, callback) 定义 一 个 或 多 个 测试 用 例 (test spec), FFA AEB — 

例 中 通过 expect() 函数 进行 断言 (assertion). 








整体 而 言 ， 其 基础 骨架 大 致 如 下 : 


describe('A suite', () => { 
it('is a spec', () => { 
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expect(1).toBe(1); 
}); 
}); 


运行 该 测试 : 
$ npm test js/__tests__/dummy-test.js 


> whinepad@2.0.0 test /Users/stoyanstefanov/reactbook/whinepad2 
> jest "js/__tests__/dummy-test.js" 


Using Jest CLI v0.8.2, jasmine1 


PASS js/__tests__/dummy-test.js (0.206s) 
1 test passed (1 total in 1 test suite, run time 0.602s) 


当 你 的 测试 中 存在 错误 的 断言 时 ， 比 如 : 





expect(1).toBeFalsy(); 





测试 程序 会 运行 失败 ， 并 给 出 错误 信息 ， 如 图 7-1 所 示 。 





> whinepad@2.0.0 test /Users/stoyanstefanov/reactbook/whinepad2 
> jest "js/__tests__/dummy-test.js" 


Using Jest CLI v0.8.2, jasminel 
FAIL js/__tests__/dummy-test.js (3.268s) 


è A suite > it is a spec 
at Spec.eval (js/__tests__/dummy-test.js:3:15) 
, 0 tests passed (1 total in 1 test suite, run time 3.669s) 
Test failed. See above for more details. 














7-1; 测试 运行 失败 


7.4.3 H+ React 测试 


接 下 来 介绍 Jest 在 React 世界 中 的 应 用 ， 你 可 以 先 从 测试 一 个 简单 的 DOM 按钮 开始 。 首 
先导 入 依赖 : 





import React from 'react'; 
import ReactDOM from 'react-dom'; 
import TestUtils from 'react-addons-test-utils'; 


设置 测试 套件 : 


describe('We can render a button', () => { 
it('changes the text after click', () => { 
i eres 
p; 








既然 模板 代码 准备 好 了 ， 接 下 来 就 要 开始 进行 泻 染 和 测试 了。 首先 泻 染 一 些 简单 的 ISX: 


const button = TestUtils.renderIntoDocument( 
<button 
onClick={ev => ev.target.innerHTML = 'Bye'}> 
Hello 
</button> 


) ; 
在 这 里 ， 我 们 使 用 了 React 的 测试 工具 库 泻 染 JSX 一 一 当 你 点 击 按钮 时 ， 文 本 内 容 会 
改变 。 


在 内 容 泻 染 完成 后 ， 需 要 检查 泻 染 内 容 是 否 符合 设想 : 











expect(ReactDOM.findDOMNode(button).textContent).toEqual('Hello'); 


如 你 所 见 ， 这 里 使 用 了 ReactDOM.findDOMNode() 获取 DOM 节点 。 随 后 ， 你 可 以 使 用 熟悉 
的 DOM API 检查 该 节点 。 


























你 通常 还 需要 测试 界面 与 用 户 的 交互 。React 提供 了 TestUtils.Simulate HR, HERE 
成 这 件 事情 : 


TestUtils.Simulate.click(button) ; 
最 后 需要 检查 界面 是 否 响应 了 交互 事件 : 


expect (ReactDOM. findDOMNode(button).textContent).toEqual('Bye'); 

















本 章 的 剩余 部 分 将 会 介绍 更 多 例子 和 API， 甚 中 主要 用 到 的 工具 如 下 : 





TestUtils.renderIntoDocument (用 于 演 染 任意 JSX); 

e TestUtils.Simulate.* 负责 与 界面 进行 交互 ; 

e ReactDOM.findDOMNode() (或 者 其 他 一 些 TestUtils 方法 ) 负责 取得 DOM 节点 的 引用 ， 
然后 检查 节点 内 容 是 否 符合 设想 。 























7.4.4 测试 <Button> 组 件 
<Button> 组 件 的 代码 如 下 所 示 : 





/* @flow */ 


import React from 'react'; 
import classNames from 'classnames'; 


type Props = { 
href: ?string, 
className: ?string, 


J; 
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Const Button = (props: Props) => 
props .href 
? <a {...props} className={classNames('Button', props.className)} /> 
: <button {...props} className={classNames('Button', props.className)} /> 


export default Button 


我 们 将 测试 如 下 功能 : 





。 根据 href 属性 是 否 存在 ， 对 应 泻 染 <a> 标签 或 <button> 标签 (第 一 个 测试 用 例 ) ; 
。 接收 自 定义 类 名 (第 二 个 测试 用 例 )。 


创建 一 个 新 的 测试 文件 : 


jest 
.dontMock('../source/components/Button') 
.dontMock('classnames' ) 


> 


import React from 'react'; 
import ReactDOM from 'react-dom'; 
import TestUtils from 'react-addons-test-utils'; 


这 里 的 import 语句 没有 变化 ， 但 前 面 加 上 了 新 的 jest.dontMock() 调用 。 


这 里 mock 的 含义 是 指使 用 某 些 模拟 的 代码 替代 原 有 的 功能 ， 以 便 进 行 测 试 。mock 在 单元 
测试 中 很 常用 ， 因 为 你 希望 测试 的 是 一 个 “单元 ”一 一 隔离 测试 某 个 模块 ， 以 减少 整个 系 
统 中 其 他 模块 的 影响 。 人 们 通常 要 花费 相当 多 的 努力 在 编写 mock 上 ， 而 Jest 则 采取 了 相 
反 的 做 法 : 自动 为 每 个 依赖 的 模块 生成 mock， 并 默认 提供 mock。 当 你 希望 测试 真实 代码 
而 不 是 mock 的 时 候 ， 可 以 通过 dontMock() 方法 设置 不 需要 进行 mock。 



































在 上 述 例子 中 ， 你 声明 了 不 希望 mock <Button> 组 件 及 其 使 用 的 classnames Æ, 





接 下 来 引入 <Button> 组 件 : 
const Button = require('../source/components/Button'); 


在 本 书 编写 时 ， 尽 管 在 Jest 文档 中 也 采用 这 种 写法 ， 但 上 述 require() 调用 
不 能 正常 工作 。 你 需要 将 其 修改 为 : 


const Button = require('../source/components/ 
Button').default; 























TE 1: 从 Jest 15.0 版 本 开始 ， 自 动 mock 的 功能 已 经 被 禁用 了 ， 具 体 说 明 参 见 http://facebook. github.io/jest/ 
blog/2016/09/01/jest-15.html#disabled-automocking。 








一 一 译 者 注 





import 语句 也 不 能 生效 : 


1 


import Button from 
需要 修改 为 : 


import _Button from '../source/components/Button'; 
const Button = _Button.default; 


另 一 种 做 法 是 在 <Button> 组 件 中 把 export default Button 修改 为 export 
{Button}， 然 后 通过 import {Button} from '../source/component/Button' 
进行 导入 。 

希望 在 读者 阅读 本 书 时 ， 默 认 的 import 语句 已 经 可 以 正常 工作 。 


../source/components/Button ; 


























1. 第 一 个 用 例 
接 下 来 ， 我 们 分 别 使 用 describe() 方法 和 itO 方法 设置 测试 套件 和 第 一 个 测试 用 例 : 


describe('Render Button components', () => { 
it('renders <a> vs <button>', () => { 
/* 渲染 组 件 并 检测 结果 */ 
})3 
H; 


in 








Fe ERARA E BA href 属性 ， 因 此 实际 应 该 演 染 一 个 <button> 标签 








const button = TestUtils.renderIntoDocument( 
<div> 
<Button> 
Hello 
</Button> 
</div> 


) ; 


注意 ，<Button> 这 种 无 状态 函数 式 组 件 需 衰 在 男 一 层 DOM 节点 中 ， 以 便 随 后 通过 
ReactDOM 获取 。 








现在 调用 ReactDOM. findDOMNode(button) JA E EA A <div>。 因 此 要 获取 <button>， 需 
要 取得 第 一 个 子 节 点 ， 并 检查 确认 该 节点 是 否 为 按钮 ; 














expect(ReactDOM.findDOMNode(button) .chiLdren[0].nodeName) .toEquaL('BUTTON ); 


类 似 地 ， 你 还 需要 在 这 个 测试 用 例 中 验证 当 href 属性 存在 时 是 否 会 泻 当 <a> 标签 。 


const a = TestUtils.renderIntoDocument( 
<div> 
<Button href="#"> 
Hello 
</Button> 
</div> 
) ; 
expect (ReactDOM. findDOMNode(a).children[0].nodeName).toEqual('A'); 
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2. 第 二 个 用 例 
在 第 二 个 测试 用 例 中 ， 你 需要 添加 自 定义 类 名 ， 并 检查 最 终生 成 的 类 名 是 否 符 合 预期 : 





it('allows custom CSS classes', () => { 
const button = TestUtils.renderIntoDocument( 
<div><Button className="good bye">Hello</Button></div> 
); 
const buttonNode = ReactDOM.findDOMNode(button).children[0]; 
expect(buttonNode.getAttribute('class')).toEqual('Button good bye'); 
}); 

















这 里 有 必要 重点 强调 Jest 的 mock 功能 。 有 时 ， 你 可 能 在 编写 测试 时 发 现 没有 得 到 预期 的 
结果 。 这 种 情况 有 可 能 是 因为 你 忘记 关闭 了 Jest 的 mock 功能 。 比 如 ， 你 可 以 尝试 把 顶部 
的 代码 改 为 : 








jest 
.dontMock('../source/components/Button' ) 
// .dontMock('classnames' ) 


这 时 Jest & mock 你 的 classnames 模块 ， 并 使 得 该 模块 不 会 实现 任何 功能 。 你 可 以 通过 以 
下 测试 证 明 这 个 结果 : 








const button = TestUtils.renderIntoDocument( 
<div><Button className="good bye">Hello</Button></div> 

); 

console. log(ReactDOM.findDOMNode(button).outerHTML); 


这 段 代 码 在 控制 台中 生成 的 HTML 代码 如 下 : 
<div data-reactid=".2"> 


<button data-reactid=".2.0">Hello</button> 
</div> 


如 你 所 见 ， 无 论 填写 什么 类 名 ， 最 终 都 不 会 生成 出 来 ， 因 为 classNames() 在 mock 之 后 不 
会 实现 任何 功能 。 





把 注释 掉 的 dontMock() 方法 还 原 : 


jest 
.dontMock('../source/components/Button') 
.dontMock('cLassnames ) 


然后 outerHTML 就 会 发 生变 化 : 


<div data-reactid=".2"> 
<button class="Button good bye" data-reactid=".2.0">Hello</button> 
</div> 





这 时 你 的 测试 就 可 以 成 功 通过 了 。 


当 一 个 测试 的 执行 不 正常 时 ， 你 可 能 需要 知道 实际 生成 的 HTML 结构 是 什 
么 。 一 个 快速 简便 的 方法 就 是 使 用 consoLe.Log(node.outerHTML) ， 让 HTML 
内 容 在 控制 台中 输出 。 


7.4.5 测试 <Actions> 组 件 

<Actions> 组 件 也 是 一 个 无 状态 组 件 ， 这 意味 着 你 需要 把 它 包 囊 在 另 一 层 DOM 节点 中 ， 以 
便 随后 进行 检查 。 一 种 方式 是 像 前 面 对 <Button> 组 件 所 做 的 那样 ， 将 其 包 庄 在 div 中 并 通 
过 以 下 方式 访问 : 

















const actions = TestUtils.renderIntoDocument( 
<div><Actions /></div> 


); 


ReactDOM. findDOMNode(actions).children[0]; // <Actions> 组 件 的 根 节点 


1. AHERE 
另 一 种 方式 是 使 用 组 件 包 囊 层 ， 以 方便 你 随后 使 用 Testutils 提供 的 各 种 方法 寻找 需要 检 
查 的 节点 。 


这 个 包 囊 层 非 常 简单 ， 可 以 定义 在 一 个 模块 中 ， 方 便 以 后 重用 : 


import React from 'react'; 
class Wrap extends React.Component { 
render() { 
return <div>{this.props.children}</div>; 


} 


export default Wrap 
接 下 来 编写 测试 模板 : 
jest 


.dontMock('../source/components/Actions' ) 
.dontMock('./Wrap') 


2 


import React from 'react'; 
import TestUtils from 'react-addons-test-utils'; 


const Actions = require('../source/components/Actions'); 
const Wrap = require('./Wrap'); 


describe('Click some actions', () => { 
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it('calls you back', () => { 
/* 演 染 */ 
const actions = TestUtils.renderIntoDocument( 


<Wrap><Actions /></Wrap> 


); 
/* 搜索 并 检查 节点 */ 
H; 
p; 
忆 一 下 ， 其 代码 如 下 : 





2. mock 函数 
<Actions> 组 件 并 没有 什么 特别 的 地 方 。 我 们 回 


const Actions = (props: Props) => 
<div className="Actions"> 
<span 


tabIndex="0" 
className="ActionsInfo" 


title="More info" 
onClick={props.onAction.bind(null, 'info')}>&#8505;</span> 
{/* 另外 两 个 span 标 签 */} 
</div> 
点 击 这 些 按钮 时 ， 能 否 正确 地 调用 onAction 


$b H Ws 


唯一 需要 测试 的 功能 是 ， 当 回调 函数 。Jest 允 
许 你 定义 mock 函数 ， 并 验证 函数 如 何 被 调用 。 这 用 于 验证 我 们 的 回调 函数 再 合适 不 过 了 。 








调 国 数 的 形式 传递 给 Actions: 











在 测试 代码 中 ， 你 需要 创建 一 个 新 的 mock 函数 ， 并 将 其 以 回 


const callback = jest.genMockFunction(); 
const actions = TestUtils.renderIntoDocument( 
<Wrap><Actions onAction={callback} /></Wrap> 


); 
接 下 来 模拟 点 击 动作 按钮 : 
TestUtils 
.ScryRenderedDOMComponentsWithTag(actions, 'span') 
.forEach(span => TestUtils.Simulate.click(span)); 
注意 我 们 使 用 了 Testutils 中 的 一 个 方法 寻找 DOM 节点 。 该 方法 返回 
<span> 节点 的 数组 ， 然 后 你 逐一 点 击 数组 中 的 每 个 节点 。 
现在 你 的 mock 回调 函数 必然 会 被 调用 三 次 。 你 需要 在 expect() 方法 中 对 此 进行 断言 : 


一 个 包含 三 个 





const calls = callback.mock.calls; 
A 


expect(calls.length).toEqual(3); 
如 你 所 见 ，callback.mock.calls 属性 是 一 个 数组 。 每 当 函 数 被 调用 时 ， 都 会 传递 一 个 包 


‘info') 的 形式 





参数 的 数组 到 该 属性 中 。 
第 一 个 动作 按钮 的 名 称 是 info， 在 回调 时 通过 props.onAction.bind(null, 
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把 类 型 info 传递 到 回调 函数 中 。 因 此 ， 第 一 次 调用 mock 回调 (0) 的 第 一 个 参数 (0) 必 


然 是 info: 








expect(calls[0][0]).toEqual('info'); 
另外 两 个 按钮 的 断言 也 类 似 : 


expect(calls[1][0]).toEqual('edit'); 

expect(calls[2][0]).toEqual('delete'); 
3. find 与 scry 
TestUtils (https://facebook.github.io/react/docs/test-utils.html) 提供 了 一 系列 函数 ， 帮 助 你 
在 React 演 染 树 中 寻找 DOM 节点 。 比 如 ， 根 据 标签 名 或 者 类 名 寻找 节点 。 前 面 的 例子 用 
到 了 其 中 一 种 方法 : 











TestUtils.scryRenderedDOMComponentsWithTag(actions, 'span') 
另 一 种 方法 是 : 

TestUtils.scryRenderedDOMComponentsWithClass(actions, 'ActionsInfo') 
与 scry* 方法 相对 应 的 是 find* 方法 。 比 如 : 


TestUtils.findRenderedDOMComponentWithClass(actions, 'ActionsInfo') 





注意 上 述 方法 中 Component 和 Components 的 区 别 。scry* 系列 方法 找 出 所 有 匹配 的 节点 ， 
并 返回 一 个 数组 〈 甚 至 在 只 匹配 一 个 或 者 零 个 节点 时 也 是 如 此 )， 而 find* 系列 方法 只 返 
回 一 个 节点 。 如 果 没 有 匹配 节点 或 者 匹配 了 多 个 节点 时 ， 后 者 就 会 报错 。 因 此 ， 当 你 使 用 
find* 系列 方法 进行 寻找 时 ， 已 经 意味 着 假定 在 DOM 树 中 只 存在 一 个 DOM 市 点 。 























7.46 更 多 模拟 交互 
接 下 来 测试 Rating 组 件 。 在 鼠标 移入 、 移 出 和 点 击 时 ， 其 状态 会 发 生 改变 。 测 试 的 模板 代 
人 码 如 下 : 





jest 
.dontMock('../source/components/Rating') 
.dontMock('cLassnames ' ) 


3 


import React from 'react'; 
import TestUtils from 'react-addons-test-utils'; 


const Rating = require('../source/components/Rating'); 


describe('works', () => { 
it('handles user actions', () => { 
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const input = TestUtils.renderIntoDocument(<Rating />); 
/* 在 此 编写 expect() 的 期 望 结 果 */ 


H; 
FJ; 


TERRIA A Ee Ea <Rating> 组 件 ， 因 为 这 个 组 件 不 是 无 状态 函数 式 组 件 。 

















组 件 中 有 很 多 星星 (默认 为 5 个)， 每 个 span 标签 对 应 一 颗 星 星 。 我 们 可 以 通过 以 下 方式 
获取 它们 : 


const stars = TestUtils.scryRenderedDOMComponentsWithTag(input, 'span'); 








现在 测试 需要 模拟 鼠标 移入 和 移出 事件 ， 并 点 击 第 4 颗 星 星 (span[3])。 这 时 ， 前 面 4 颗 
星星 都 应 该 被 “点 亮 ”， 也 就 是 包含 RatingOn 类 名 ， 而 第 5 颗 星 星 应 该 维持 原 有 的 “熄灭 ” 
状态 : 

















TestUtils.Simulate.mouseOver(stars[3]); 
expect(stars[0].className) .toBe('RatingOn'); 
expect(stars[3].className) .toBe('RatingOn'); 
expect(stars[4].className).toBeFalsy(); 
expect(input.state.rating).toBe(0); 
expect(input.state.tmpRating).toBe(4); 


TestUtils.Simulate.mouseOut(stars[3]); 
expect(stars[0].className).toBeFalsy(); 
expect(stars[3].className) .toBeFalsy(); 
expect(stars[4].className).toBeFalsy(); 
expect(input.state.rating).toBe(0); 

expect(input.state.tmpRating).toBe(0); 


TestUtils.Simulate.click(stars[3]); 

expect (input.getValue()).toBe(4); 
expect(stars[0].className) .toBe('RatingOn'); 
expect(stars[3].className) .toBe('RatingOn'); 
expect(stars[4].className).toBeFalsy(); 
expect(input.state.rating).toBe(4); 
expect(input.state.tmpRating).toBe(4); 


此 外 还 要 注意 测试 是 如 何 获取 组 件 状态 的 ， 以 验证 state. rating 和 state. tmpRating 的 正 
确 性 。 对 于 测试 而 言 ， 这 可 能 有 点 奇 记 了。 上 毕竟 如 果 外 部 的 显示 结果 符合 预期 ， 为 何 还 要 
关心 组 件 内 部 的 状态 呢 ? 此 处 只 是 为 了 证 明 这 样 做 是 可 行 的 。 














7.4.7 测试 完整 的 交互 
fe PRA Excel 组 件 编 写 测 试 。 毕 觉 这 个 组 件 是 整个 应 用 的 关键 ,一 旦 该 组 件 出 现 问 题 ， 
就 会 严重 影响 应 用 体验 。 事 不 宜 迟 ， 开 始 编写 测试 : 











jest .autoMockOff(); 


import React from 'react'; 
import TestUtils from 'react-addons-test-utils'; 


const Excel = require('../source/components/Excel'); 
const schema = require('../source/schema'); 


let data = [{}]; 
schema. forEach(item => data[Q][item.id] = item.sample); 


describe('Editing data', () => { 
it('saves new data', () => { 
/* te See CE Ue Re */ 
}); 
H: 


首先 要 注意 到 顶部 的 jest.autoMockoff(); 函数 。 这 里 没有 逐一 列 出 Excel 使 用 的 所 有 组 件 
(以 及 组 件 内 使 用 的 组 件 )， 你 可 以 通过 这 个 方法 直接 禁用 所 有 的 mock。 


接 下 来 ， 需 要 用 schema 对 象 和 示例 数据 data 对 组 件 进行 初始 化 工作 (和 app.js 类 似 )。 





然后 进行 泻 染 : 


const callback = jest.genMockFunction(); 
const table = TestUtils.renderIntoDocument( 
<Excel 
schema={schema} 
initialData={data} 
onDataChange={callback} /> 
)3 


目前 看 起 来 一 切 正 常 。 现 在 改变 第 一 行 的 第 一 个 单元 格 。 设 置 新 的 值 为 : 
const newname = '$2.99 chuck'; 
目标 单元 格 为 : 


const cell = TestUtils.scryRenderedDOMComponentsWithTag(table, 'td')[0]; 





在 本 书 编写 时 ， 需 要 编写 一 些 额外 的 hack 代码 以 支持 访问 dataset 属性 ， 因 
为 Jest 尚未 支持 这 种 DOM 操作 : 


cell.dataset = { // 针对 Jest 的 DoM 兼 容 性 问题 采取 的 非常 规 手段 
row: cell.getAttribute('data-row'), 
key: cell.getAttribute('data-key'), 


}; 























双击 单元 格 ， 其 内 容 会 变 为 一 个 包含 文本 输入 框 的 表单 : 
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TestUtils.Simulate.doubleClick(cell); 





改变 输入 框 的 值 ， 并 提交 表单 : 


cell.getElementsByTagName('input')[0].value = newname; 
TestUtils.SimuLlate.submit(cell.getElementsByTagName('form')[0]); 


现在 单元 格 的 内 容 不 再 是 表单 了， 而 是 纯 文 本 内 容 : 
expect(cell.textContent).toBe(newname); 


此 时 onDataChange 回调 函数 会 被 调用 。 该 函数 接收 一 个 数组 参数 ， 数 组 中 包含 了 表格 数据 
的 键 值 对 。 你 可 以 验证 mock 回调 函数 是 否 正确 接收 到 了 新 的 数据 : 














expect(callback.mock.calls[0][0][0].name).toBe(newname) ; 


此 处 [6][6][9] 的 含义 为 : 第 一 个 0 对 应 mock 函数 第 一 次 被 调用 ， 第 二 个 0 对 应 函数 接 
收 的 首 个 参数 ， ae ee, 第 三 个 0 对 应 数组 中 的 第 一 个 元 素 ， 它 在 这 里 是 一 个 对 
象 (对 应 表格 中 的 一 条 记录 ) ， 其 中 的 name 属性 值 为 $2.99 chuck, 








除了 使 用 TestUtils.Simulate.submit 提交 表单 ， 你 还 可 以 选用 Testutils. 
sinulate.keyDown 模拟 敲 下 回 车 键 时 的 事件 。 这 同样 可 以 提交 表单 。 





现在 编写 第 二 个 测试 用 例 ， 我 们 删除 一 行 示例 数据 : 





it('deletes data', () => { 

// 和 之 前 相同 

const callback = jest.genMockFunction(); 

const table = TestUtils.renderIntoDocument( 

<Excel 

schema={schema} 
initialData={data} 
onDataChange={callback} /> 

); 





TestUtils.Simulate.click( // 点 击 图 标 
TestUtils.findRenderedDOMComponentWithClass(table, 'ActionsDelete' ) 








); 





TestUtils.Simulate.click( // 确认 对 话 框 
TestUtils.findRenderedDOMComponentWithClass(table, 'Button') 


); 





expect(callback.mock.calls[0][0].length).toBe(0); 
]); 





在 前 面 的 例子 中 ，callback.mock.calls[9][9] 对 应 用 户 交 互 后 产生 的 新 数据 。 但 这 个 例子 
中 的 数组 是 空 的 ， 因 为 在 测试 中 删除 了 单行 记录 。 











74.8 代码 覆盖 率 

掌握 了 上 述 这 些 主题 后 ， 剩 下 的 事情 就 简单 了 ， 但 可 能 会 有 一 点 枯燥 。 你 需要 确保 尽 可 能 
多 地 测试 所 有 可 能 发 生 的 场景 。 比 如 点 击 info 行为 按钮 并 点 击 取消 ， 点 击 删除 并 点 击 取 
消 ， 再 次 点 击 并 删除 。 


测试 是 很 有 必要 的 ， 可 以 帮助 你 更 快 地 解决 问题 、 更 自信 地 进行 开发 与 代码 重 构 。 测 试 还 
可 以 帮助 你 纠正 同事 的 错误 : 当 他 们 党 得 改变 某 一 处 地 方 不 会 造成 什么 影响 时 ， 事 实 可 能 
远 远 超出 他 们 的 预想 。 一 种 “游戏 化 ”测试 过 程 的 方式 是 使 用 代码 履 盖 这 (code coverage) 
特性 。 





























该 命令 会 运行 找到 的 所 有 测试 并 生成 一 份 报告 ， 告 诉 你 已 经 测试 RE) 了 多 少 行 代 
码 、 多 少 个 函数 等 。 示 例 结果 如 图 7-2 所 示 。 














[|@9@ (2) whinepad2 一 bash — 91x24 


[using Jest CLI v@.8.2, jasminel 
PASS js/__tests__/FormInput-test.js (0.962s) 
Mie js/_tests__/Rating-test.js (1.009s) 
PASS js/__tests__/Dialog-test.js (1.032s) 
PASS js/__tests__/Wrap.js (0.419s) 
PASS js/__tests__/Button-test.js (@.485s) 


PASS js/__tests__/Actions-test.js (@.452s) 
PASS js/__tests__/Excel-test.js (4.439s) 
12 tests passed (12 total in 7 test suites, run time 5.727s) 
= [二 -一 一 | 


% Lines |Uncovered Lines | 


source/ 

schema. js 

source/components/ 
Actions.js 
Button. js 
Dialog. js 
Excel.js 
FormInput.js 
Rating.js 














图 7-2: 代码 覆盖 率 报告 


你 会 发 现 目 前 的 测试 报告 并 非 完美 ， 必 然 要 编写 更 多 的 测试 用 例 。 代 码 覆 盖 率 报告 的 一 个 
实用 特性 是 显示 未 被 覆盖 的 行 号 。 比 如 ， 尽 管 你 已 经 对 FormInput 进行 了 测试 ， 但 第 22 行 
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还 没有 被 覆盖 。 我 们 找 出 这 行 代码 ， 发 现 它 是 一 个 return 语句 : 


getValue(): FormInputFieldValue { 
return 'value' in this.refs.input 
? this.refs.input.value 
: this.refs.input.getVaLue(); 
} 


看 来 我 们 还 没有 测试 过 这 个 函数 。 因 此 赶紧 编写 一 个 测试 用 例 作 为 补救 措施 : 





it('returns input value', () => { 
let input = TestUtils.renderIntoDocument(<FormInput type="year" />); 
expect (input.getVaLlue()).toBe(String(new Date().getFullYear())); 
input = TestUtils.renderIntoDocument( 
<FormInput type="rating" defaultValue="3" /> 
) ; 
expect(input.getValue()).toBe(3); 
P; 





第 一 个 expect() 测试 了 一 个 内 建 的 DOM 输入 元 素 ， 而 第 二 个 expect.) 则 测试 了 自 定义 
的 input 组件。 现在 getValue() 方法 中 的 三 元 表达 式 对 应 的 两 种 情况 应 该 都 会 被 覆盖 了 。 








再 次 运行 上 述 命令 。 在 目前 的 代码 覆盖 率 报告 中 ， 关 于 第 22 行 的 提示 已 经 消失 了 (如 图 
7-3 所 示 )。 














( BOR ) (2) whinepad2 — bash — 91x24 


Using Jest CLI v0.8.2, jasminel 

PASS js/__tests__/Rating-test.js (0.941s) 

PASS js/__tests__/Dialog-test.js (1.061s) 

PASS js/__tests__/Excel-test.js (1.217s) 

PASS js/__tests__/Button-test.js (0.51s) 

PASS js/__tests__/Actions-test.js (0.474s) 

PASS js/__tests__/Wrap.js (0.335s) 

PASS js/__tests__/FormInput-test.js (4.464s) 

13 tests passed (13 total in 7 test suites, run time 5.752s) 


source/ 


schema.js 
source/components/ 
Actions.js 
Button.js 
Dialog.js 
Excel.js 
FormInput.js 
Rating.js 














7-3: 修改 后 的 代码 覆盖 率 报告 





第 8 章 
Flux 





最 后 一 章 将 介绍 Flux (https://facebook.github.io/flux/), Flux 是 管理 组 件 间 通信 的 另外 一 
种 方式 ， 同 时 也 可 以 用 于 管理 整个 应 用 的 数据 流 。 目 前 我 们 已 经 知道 如 何 把 属性 从 父 组 件 
传递 到 子 组 件 ， 从 而 进行 组 件 间 通 信 并 监听 子 组 件 发 生 的 变化 〈 比 如 通过 onDataChange) 。 
然而 通过 这 种 方式 传递 属性 时 ， 你 可 能 会 遇 到 一 个 组 件 需 要 接收 很 多 属性 的 情况 。 这 就 使 
得 组 件 的 测试 变 得 难以 进行 ， 因 为 属性 的 组 合 排列 情况 非常 多 ， 难 以 验证 所 有 的 情况 能 否 
eH fe. 

















此 外 ， 在 某 些 场景 中 ， 你 还 需要 把 属性 像 “管道 ” 般 从 父 组件 传 递 到 子 组 件 、 第 三 级 组 
件 、 第 四 级 组 件 …… 然 而 这 种 工作 往往 是 重复 的 (本 质 上 是 不 良 实践 )、 混 乱 的 ， 并 且 会 
让 阅读 代码 的 人 的 精神 负担 更 大 (有 太 多 事情 需要 同时 跟踪 )。 


Flux 就 是 一 种 可 以 帮助 你 克服 这 些 障碍 的 方式 ， 并 让 你 在 管理 应 用 的 数据 流动 时 保持 头脑 
清晰 。 与 其 说 Flux 是 一 个 代码 库 ， 不 如 说 它 是 一 种 组 织 (架构) 应 用 数据 的 思想 。 毕 况 在 
大 部 分 情况 下 ， 数 据 都 是 非常 重要 的 。 用 户 可 能 会 使 用 你 的 应 用 管理 他 们 的 钱 、 邮 件 、 照 
片 等 。 如 果 应 用 界面 有 点 粗糙 ， 用 户 也 许 还 能 忍受 ， 但 应 用 在 任何 情况 下 都 应 该 能 正常 处 
理 数 据 ， 不 能 让 用 户 产生 疑惑 (“刚才 我 到 底 有 没有 成 功 支付 30 美元 ?”)。 


目前 ， 基 于 Flux 的 思想 已 经 衍生 出 许多 版 本 的 开源 实现 ， 但 本 章 不 会 逐一 讨论 这 些 实现 ， 
而 是 将 尝试 自己 实现 一 个 Flux 架构 。 一 旦 你 掌握 其 思想 (并 确信 Flux 能 给 你 带 来 便利 )， 
就 可 以 深入 探究 这 些 开源 实现 并 从 中 选取 一 种 适合 实际 开发 的 方案 ， 也 可 以 持续 完善 自己 
的 方案 。 
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8.1 理念 


在 Flux 的 理念 中 ， 应 用 的 核心 就 是 数据 。 数 据 存储 于 Store 中 。 你 的 React 组 件 (View, 
视图 ) 从 Store 中 读 取 数 据 并 进行 泻 染 。 用 户 与 应 用 之 间 的 交互 行为 会 产生 Action (比如 
点 击 按钮 )。Action 会 导致 Store 中 的 数据 发 生变 化 ， 进 而 影响 View。 这 个 循环 一 直 持续 
进行 (如 图 8-1 所 示 )。 在 循环 中 ， 数 据 流动 是 单 向 的 〈unidirectional) 。 这 种 单 向 数据 流 的 
优点 是 更 容易 进行 跟踪 、 推 理 与 调试 。 















































8-1: 单 向 数据 流 


在 上 述 架 构 的 基础 之 上 ， 还 有 一 些 变种 与 延伸 版 本 ， 包 括 更 多 Action、 多 重 Store 以 及 
Dispatcher 等 。 在 深入 解释 这 些 新 概念 之 前 ， 我 们 先 阅 读 一 部 分 代码 。 





8.2 ”回顾 Whinepad 
在 Whinepad 应 用 中 ， 顶 层 的 React 组 件 称 为 <Whinepad>， 其 创建 方式 如 下 : 


<Whinepad 
schema={schema} 
initialData={data} /> 


<Whinepad> 组 件 负 责 构 成 <Excel> 组 件 : 


<Excel 

schema={this.props.schema} 

initialData={this.state.data} 

onDataChange={this._onExcelDataChange.bind(this)} /> 
首先 ， 描 述 应 用 所 需 数据 的 schema 对 象 从 <Whinepad> 组 件 〈 像 管道 般 ) 传递 到 <Excel> 组 
件 中 〈 接 下 来 再 传递 到 <Form> 组 件 )。 这 种 方式 显得 有 些 重复 和 纵向 模式 化 。 假 如 你 还 需 
要 管道 式 地 传递 儿 个 类 似 的 属性 呢 ? RETA, APE RG (surface) 就 会 变 得 过 于 庞大 ， 
且 毫 无 益处 。 








上 文 提 及 的 “表面 ” 指 的 是 一 个 组 件 接 收 的 所 有 属性 ， 通 常 被 用 作 “API” 与 
“函数 签名 ”的 同义词 。 在 程序 设计 中 ， 应 当 保 持 表 面 最 小 化 。 一 个 函数 若 接 
收 多 达 十 个 参数 ， 会 比 接收 两 个 (或 零 个 ) 参数 更 难以 使 用 、 调 试 与 测试 。 














虽然 schema 对 象 是 按照 原样 传递 的 ， 但 是 数据 看 似 并 非 如 此 。<nhinepad> 组 件 接收 到 
initialdata 属性 后 ， 会 对 数据 进行 某 些 修改 再 传递 给 <Excel> 组 件 (传递 的 属性 是 this. 
state.data 而 不 是 this.props.inititaLData)。 这 里 会 产生 两 个 问题 : 如 果 新 的 数据 不 同 于 
原 有 数据 ， 会 发 生 什么 ? 当 提 及 最 新 的 数据 时 ， 到 底 哪个 组 件 拥有 “单一 数据 产 ”? 


在 上 一 章 的 实现 中 ， 虽 然 顶层 <Whinepad> 组 件 确实 包含 了 最 新 的 数据 ， 但 这 并 没有 明确 为 
什么 UI 组 件 (React 是 完全 和 UI 相关 的 ) 应 该 掌握 数据 的 来 源 。 





























接 下 来 介绍 如 何 把 这 项 工作 移交 给 Store 进行 处 理 。 


8.3 Store 
首先 复制 一 份 现 有 的 代码 


$ cd ~/reactbook 

$ cp -r whinepad2 whinepad3 
$ cd whinepad3 

$ npm run watch 


接 下 来 ， 创 建 一 个 新 目录 用 于 放置 Flux 模块 (以 便 与 React 的 UI 组 件 区 分 开 )。 目 前 只 需 
创建 Store 和 Actions 两 个 模块 . 








$ mkdir js/source/flux 
$ touch js/source/flux/CRUDStore. js 
$ touch js/source/flux/CRUDActions. js 





Flux 架构 允许 你 创建 多 个 Store 〈 比 如 一 个 关于 用 户 数据 ， 另 一 个 关于 应 用 设置 等 )， 但 目 
前 我 们 只 关注 单个 CRUD Store 的 情况 。 这 个 Store 全 权 负 责 处 理 一 个 记录 列表 ， 在 这 个 例 
子 中 ， 是 关于 酒 类 及 其 评价 的 记录 。 








这 个 CRUDStore 和 React 本 身 没 有 联系 ， 只 需 使 用 一 个 简单 的 JavaScript 对 象 即 可 实现 : 





/* @flow */ 


let data; 
let schema; 


const CRUDStore = { 


getData(): Array<Object> { 
return data; 


}, 


getSchema(): Array<Object> { 
return schema; 


}, 
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$ 


export default CRUDStore 








如 你 所 见 ， 这 个 Store 负责 维护 单一 的 数据 来 源 ， 比 如 本 地 模块 变量 data 和 schema, Jf 
且 可 以 把 这 些 变 量 返 回 给 任何 需要 的 地 方 。 此 外 ，Store 还 允许 更 新 data 变量 (但 不 更 新 
schean 变量 ， 因 为 这 是 一 个 贯穿 整个 应 用 的 常量 ) : 

setData(newData: Array<Object>, commit: boolean = true) { 

data = newData; 


if (commit && 'LocalStorage' in window) { 
localStorage.setItem('data', JSON.stringify(newData) ); 


} 


emitter.emit('change'); 


} 


在 上 述 代 码 中 ， 除 了 更 新 本 地 的 data 变量 以 外 ，Store 还 更 新 了 持久 化 存储 中 的 数据 ;在 
这 个 例子 中 数据 存储 在 localstorage， 而 在 实际 情况 中 还 有 可 能 是 向 服务 器 发 起 XHR 请 
求 。 这 通常 只 会 在 “提交 ”情况 下 发 生 ， 因 为 没有 必要 总 是 更 新 持久 化 存储 。 比 如 在 搜索 
时 ， 你 总 是 想 要 取得 最 新 的 数据 ， 因 此 没有 必要 永久 地 保存 这 些 数据 。 但 是 假如 在 调用 
setData() 后 停电 ， 你 丢失 了 除 搜索 结果 外 的 所 有 数据 呢 ? 


最 后 ， 你 会 看 到 一 个 change 事件 被 触发 。( 稍 后 你 将 了 解 更 多 内 容 。) 











Store 还 可 以 提供 一 些 有 用 的 方法 ， 比 如 获取 数据 的 总 行 数 ， 以 及 获取 某 一 行 记 录 : 


getCount(): number { 
return data. length; 
}, 


getRecord(recordId: number): ?0bject { 
return recordId in data ? data[recordId] : null; 


} 


在 应 用 初始 化 时 ， 你 需要 初始 化 Store。 在 此 之 前 初始 化 工作 通过 app.js 进行 ， 但 现在 
Store 是 处 理 数据 的 唯一 地 方 ， 因 此 将 数据 初始 化 交 给 Store 自行 处 理 : 























lay 





init(initialSchema: Array<Object>) { 
schema = initialSchema; 


const storage = 'localStorage' in window 
? localStorage.getItem('data') 
: null; 
if (!storage) { 
data = [{}]; 
schema.forEach(item => data[0][item.id] = item.sample); 
} else { 
data = JSON.parse(storage); 
} 


} 
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现在 app.js 可 以 通过 以 下 方式 启动 应 用 : 


IJ sas 

import CRUDStore from './flux/CRUDStore'; 
import Whinepad from './components/Whinepad' ; 
import schema from './schema'; 


CRUDStore.init(schema) ; 


ReactDOM. render ( 

<div> 
{/* 更 多 JSX 代 码 */} 
<Whinepad /> 

{/* ... */} 


如 你 所 见 ， 一旦 Store 被 初始 化 ，<Whinepad> 组 件 就 不 需要 再 接收 任何 属性 了 。 组 件 所 


需 的 数据 可 以 通过 CRUDStore.getData() 方法 获取 ， 而 数据 的 描述 可 以 通过 CRuDStore. 
getSchema() 获取 。 


你 可 能 会 问 : 为 何 Store 不 能 自己 读 取 数 据 ， 而 是 依赖 于 外 部 传 入 的 schema 
对 象 ? 其 实 ， 你 当然 可 以 直接 在 Store 中 导入 schema 模块 ， 但 让 应 用 自身 处 
理 schema 的 来 源 更 为 合理 。 试 想 schema 是 否 为 一 个 模块 ? 若 直 接 导 入 是 否 
属于 硬 编码 ?既然 是 模块 ， 是 否 应 该 由 用 户 定义 ? 

















8.3.1 Store 事件 

还 记得 之 前 在 Store 更 新 数据 时 调用 的 emitter.emit('change'); 方法 吗 ? 这 个 方法 用 于 通 
知 对 数据 感 兴趣 的 UI 模块 ， 以 便 模块 在 数据 发 生变 化 时 从 Store 中 读 取 最 新 的 数据 ， 进 行 
自我 更 新 。 那 么 ， 这 个 事件 触发 机 制 到 底 是 如 何 实现 的 呢 ? 

实现 事件 订阅 的 模式 有 很 多 。 从 本 质 上 说 ， 这 些 模式 需要 收集 数据 的 一 系列 相关 者 (订阅 
者 )， 然 后 在 事件 发 生 时 “推送 ”消息 ， 调 用 每 个 订阅 者 的 回调 函数 (订阅 者 在 订阅 事件 
时 ， 需 要 提供 这 个 回调 函数 )。 

















为 简单 起 见 ， 我 们 使 用 一 个 名 为 fbemitter 的 小 型 开源 库 来 实现 事件 订阅 功能 : 
$ npm i --save-dev fbemitter 
更 新 flowconfig 文件 : 
[ignore] 
.*/fbemitter /node_modules/.* 
# 省 略 部 分 代码 


[include] 
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node_modules/classnames 
node_modules/fbemitter 


# 省 略 部 分 代码 
在 Store 模块 的 开端 ， 需 要 导入 并 初始 化 事件 emitter; 








/* @flow */ 

import {EventEmitter} from 'fbemitter'; 
let data; 

let schema; 


const emitter = new EventEmitter(); 


const CRUDStore = { 
Ab es 
}; 


export default CRUDStore 
这 个 emitter 需要 负责 两 项 任务 : 


。 收集 订阅 ， 
。 通知 订阅 者 (正如 之 前 看 到 的 那样 ， 在 setData() 方法 中 调用 emitter.emit('change')), 











在 Store 中 ， 还 可 以 把 收集 订阅 功能 作为 一 个 方法 暴露 出 来 ， 让 调用 者 无 需 了 解 其 实现 细 方 : 


const CRUDStore = { 
全 


addListener(eventType: string, fn: Function) { 
emitter.addListener(eventType, fn); 

}, 

LD Se: 

}; 


至 此 ， 这 个 CRUDStore 的 功能 已 经 完备 了 。 


8.3.2 在 <Whinepad> 中 使 用 Store 

借助 Flux 实现 <Nhinepad> 组 件 相当 简单 ， 因 为 其 中 的 大 部 分 功能 将 迁移 到 CRUDActions 
中 实现 〈 稍 后 介绍 ) 1E CRUDStore 也 发 挥 了 不 少 作 用 。 我 们 将 不 再 需要 维护 this.state. 
data。 之 前 需要 维护 它 的 原因 仅仅 是 需要 把 状态 传递 给 <Excel> 组 件 ， 但 现在 <Excel> 组 
件 可 以 通过 Store 取得 数据 了 。 事 实 上 ，<Whinepad> 组 件 甚至 不 需要 处 理 Store。 我 们 不 妨 
添加 一 个 需要 用 到 Store 的 功能 : 在 搜索 域 中 显示 记录 总 数 (如 图 8-2 所 示 )。 





















































Rating Actions 
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8-2: 在 搜索 区 域 中 显示 记录 总 数 











之 前 ,在 <Nhinepad> 组 件 的 constructor() 构造 函数 中 ， 需 要 对 state 进行 初始 化 : 


this.state = { 
data: props.initialData, 
addnew: false, 
J 
现在 不 再 需要 data 属性 了 ， 但 你 仍 需 一 个 count 变量 记录 数据 总 计数 。 因 此 在 初始 化 时 ， 
需要 从 Store 中 读 取 数据 : 


/* @flow */ 

















A 
import CRUDStore from '../flux/CRUDStore'; 


TF owe 


class Whinepad extends Component { 
constructor() { 
super(); 
this.state = { 
addnew: false, 
count: CRUDStore.getCount(), 
J}; 


export default Whinepad 


此 外 ， 在 构造 函数 中 还 需要 订阅 Store 的 数据 变化 事件 ， 以 便 在 数据 变化 时 有 机 会 更 新 
this.state 中 的 数据 总 计数 : 
Constructor() { 


super(); 
this.state = { 
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addnew: false, 
count: CRUDStore.getCount(), 
FE 


CRUDStore.addListener('change', () => { 
this.setState({ 
count: CRUDStore.getCount(), 
}) 
}); 
} 


以 上 就 是 组 件 和 Store 之 间 需 要 进行 的 所 有 交互 。 无 论 Store 中 的 数据 在 任何 时 候 、 通 过 
任何 方式 发 生变 化 (包括 调用 CRUDStore 中 的 setData() 方法 时 )，Store 都 会 触发 一 个 
change 事件 。<Whinepad> 组 件 会 监听 这 个 change 事件 并 更 新 自身 状态 。 你 已 经 知道 ， 设 
置 状 态 将 会 导致 组 件 重新 演 染 ， 因 此 render() 方法 会 再 次 被 调用 。 该 方法 中 的 逻辑 和 以 往 
一 样 ， 仅 仅 是 基于 state Fil props 2H UI: 

















render() { 
return ( 
{/* ... */} 
<input 
placeholder={this.state.count === 1 
? 'Search 1 record...' 
: “Search ${this.state.count} records...° 


此 外 ， 还 可 以 通过 在 <Whinepad> 组 件 中 实现 shouldComponentUpdate() 方法 来 优化 性 能 。 
由 于 数据 的 改变 不 一 定 会 影响 数据 的 总 条 数 〈 比 如 编辑 一 条 记录 或 者 编辑 记录 中 的 某 个 字 
段 )， 组件 在 这 种 情况 下 不 需要 重新 演 染 : 














shouLdComponentUpdate(newProps: Object, newState: State): boolean { 


return ( 
newState.addnew !== this.state.addnew || 
newState.count !== this.state.count 
); 
} 








Boa, <Whinepad> 组 件 不 再 需要 把 data 和 schema 传递 到 <Excel> 组 件 中 了 。 同 样 也 不 需 
要 设置 onDataChange 回调 函数 ， 因 为 现在 所 有 的 数据 改变 都 可 以 从 Store 的 change 事件 中 
获知 。 因 此 ，<Whinepad> 组 件 中 的 render() 方法 只 需要 这 样 写 : 








7 

















render() { 
return ( 


{/* ... */} 


<div className="WhinepadDatagrid"> 
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<Excel /> 
</div> 
{/* ... */} 
); 
} 


8.3.3 ”在 <Excel> 中 使 用 Store 

和 <Whinepad> 组 件 类 似 ，<Excel> 组 件 也 不 再 需要 接收 属性 了 。 构 造 国 数 从 Store 中 读 取 
schemna， 并 赋值 给 this.schema。 事 实 上 ，this.state.schema 和 this.schema 之 间 并 没有 实 
质 区 别 ， 只 不 过 state 意味 着 变量 可 能 会 发 生 某 些 变化 ， 而 schema 是 一 个 常量 。 

















至 于 数据 ， 现 在 只 需要 在 初始 化 时 从 Store 中 读 取 并 记录 在 this.state.data 中 即 可 ， 不 再 
通过 属性 接收 。 














构造 函数 订阅 了 Store 的 change 事件 ， 以 便 state 中 的 数据 保持 最 新 (并 触发 重新 


constructor() { 
super(); 
this.state = { 
data: CRUDStore.getData(), 
sortby: null, // schema.id 
descending: false, 
edit: null, // {row index, schema.id}, 
dialog: null, // {type, idx} 
}; 
this.schema = CRUDStore.getSchema(); 
CRUDStore.addListener('change', () => { 
this.setState({ 
data: CRUDStore.getData(), 
}) 
}) 
} 


得 益 于 Store, <Excel> 组 件 需要 做 的 就 是 这 么 简单 。render() 方法 和 之 前 一 样 ， 只 需 从 
this.state 中 读 取 并 呈现 数据 即 可 。 











也 许 你 会 感到 疑惑 : 为 何 需要 把 Store 中 的 数据 复制 到 this.state 中 ? 是 否 可 以 在 
render() 方法 中 直接 访问 Store 中 的 数据 呢 ? 虽然 理论 上 是 可 行 的 ， 但 这 样 做 会 使 组 件 会 
变 得 “不 纯 ”"。 还 记得 2.15 节 提 到 过 纯 洽 染 组 件 (pure render component) 的 概念 吗 ? 这 意 
味 着 组 件 演 染 的 内 容 仅 由 props 和 state 决定 。 在 render() 方法 中 ， 任 何 函数 调用 看 起 来 
都 是 不 可 靠 的 一 一 你 不 能 确定 在 一 个 额外 的 函数 调用 中 会 返回 什么 内 容 。 应 用 还 会 变 得 难 
以 调试 、 难 以 预测 :“ 为 什么 state 中 的 数据 是 1， 而 泻 染 出 的 内 容 是 2 WE? 哦 ， 原 来 是 在 
render() 方法 中 进行 了 函数 调用 。” 
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8.3.4 在 <Form> 中 使 用 Store 

在 此 之 前 ， 表 单 组 件 同样 需要 获取 schema (用 于 获取 fields 属性 ) 以 及 defaultValues 属 
性 〈 用 于 预 填充 表单 或 者 显示 一 份 只 读 版 本 )。 目 前 这 两 者 都 已 经 转移 到 了 Store 中 。 因 此 
现在 表单 只 需要 接收 一 个 recordId 属性 ， 并 根据 该 属性 在 Store 中 查找 具体 数据 : 


























/* Q@flow */ 
import CRUDStore from '../flux/CRUDStore'; 


i ae 


type Props = { 
readonly?: boolean, 
recordId: ?number, 


Fs 


class Form extends Component { 
fields: Array<Object>; 
initialData: ?0bject; 


constructor(props: Props) { 
super(props); 
this.fields = CRUDStore.getSchema(); 
if ('recordId' in this.props) { 
this.initialData = CRUDStore.getRecord(this.props.recordId); 
} 
} 


J edt 
} 


export default Form 


表单 组 件 不 需要 注册 Store 的 change 事件 ， 因 为 在 编辑 表单 时 不 需要 监听 数据 的 变化 。 但 
是 可 能 出 现 这 样 的 场景 : 另 一 个 用 户 在 同时 进行 编辑 ， 同 一 个 用 户 在 不 同 的 标签 页 中 打开 
了 这 个 应 用 ， 并 在 两 边 都 编辑 了 数据 。 如 有 果 需 要 处 理 这 些 情况 ， 你 就 需要 监听 数据 的 变 
化 ， 并 提醒 用 户 : 数据 在 其 他 地 方正 在 被 编辑 。 



































8.3.5 FE 


该 如 何 界定 是 使 用 Flux Store 还 是 使 用 借助 属性 的 非 Flux 实现 呢 ? Store 为 所 有 的 数据 需 
求 提 供 了 一 站 式 服 务 ， 使 你 从 属性 传递 中 解脱 出 来 ， 但 与 此 同时 也 降低 了 组 件 的 可 重用 
性 。 现 在 ， 你 不 能 在 另 一 个 完全 不 同 的 场景 中 直接 重用 Excel 组 件 了 ， 因 为 在 组 件 中 从 
CRUDStore 获取 数据 的 逻辑 已 经 被 硬 编码 。 即 便 如 此 ， 只 要 新 的 场景 中 使 用 了 类 似 CRUD 
的 逻辑 (这 是 有 可 能 的 ， 否 则 你 为 何 需要 可 编辑 的 数据 表格 呢 ? ) ， 你 还 是 可 以 让 组 件 从 
Store 中 获取 数据 。 谨 记 一 点 ， 在 应 用 中 可 以 根据 需要 使 用 任意 数量 的 Store, 
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对 于 那些 底层 组 件 ， 比 如 按钮 和 表单 输入 元 素 ， 最 好 不 要 使 用 Store。 因 为 对 于 这 些 组 
件 来 说 ， 使 用 传递 属性 的 方式 更 加 方便 。 那 些 处 于 两 个 极端 间 的 组 件 类 型 都 属于 灰色 
地 带 [从 最 简单 的 按钮 (比如 <Button>) 到 最 顶层 负责 管理 所 有 内 容 的 父 组 件 ( 比 如 
<Whinepad>)]， 由 你 来 界定 是 否 使 用 Flux。<Form> 组 件 是 应 该 像 之 前 那样 连接 到 CRUD 
Store 还 是 应 该 和 Store 隔离 使 其 可 重用 呢 ? 你 可 以 根据 手头 上 的 任务 以 及 将 来 重用 该 组 件 
的 可 能 性 ， 作 出 最 合适 的 选择 。 


























8.4 Action 


Action 描述 了 Store 中 的 数据 如 何 发 生 改 变 。 当 用 户 和 View 交互 时 ， 用 户 执行 的 操作 ( 即 
Action) 会 改变 Store， 并 会 把 该 事件 传递 到 受 影响 的 View 中 。 





要 实现 这 个 更 新 CRUDStore 的 CRUDActions 很 简单 ， 只 需要 使 用 另 一 个 常规 的 JavaScript 
WER: 


/* @flow */ 





import CRUDStore from './CRUDStore'; 


const CRUDActions = { 
/* 具体 方法 */ 


> 


export default CRUDActions 


8.4.1 CRUD Action 

在 CRUDActions 模块 中 ， 我 们 应 该 实现 哪些 类 型 的 方法 呢 ? 最 常见 的 猜测 是 create()、 
delete(), update() 等 。 在 这 个 应 用 中 ， 唯 一 特别 的 地 方 是 我 们 可 以 选择 更 新 整 条 记录 或 者 
更 新 某 个 特定 的 表单 域 。 因 此 ， 需 要 分 别 实现 updateRecord() 和 updateField() 两 种 方法 : 

















/* Q@flow */ 
PR eas, TI 
const CRUDActions = { 


create(newRecord: Object) { 
let data = CRUDStore.getData(); 
data.unshift(newRecord) ; 
CRUDStore.setData(data) ; 

Js 


delete(recordId: number) { 
let data = CRUDStore.getData(); 
data.splice(recordId, 1); 
CRUDStore.setData(data) ; 

}, 
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updateRecord(recordId: number, newRecord: Object) { 
let data = CRUDStore.getData(); 
data[recordId] = newRecord; 
CRUDStore.setData(data) ; 

}, 


updateField(recordId: number, key: string, value: string|number) { 
let data = CRUDStore.getData(); 
data[recordId][key] = value; 
CRUDStore.setData(data) ; 

}, 


/* 2... */ 
J; 


这 些 代码 看 起 来 相当 琐碎 : 你 需要 从 Store 中 读 取 当前 数据 ， 然 后 对 其 进行 处 理 ， 最 后 把 
新 的 数据 写 入 Store. 














在 这 里 不 需要 实现 CRUD 中 的 R， 因 为 Store 已 经 为 你 提供 了 读 取 数 据 的 
能 


8.4.2 ”搜索 与 排序 


在 之 前 的 实现 中 ，<whinepad> 组 件 负 责 搜索 数据 。 这 样 做 的 原因 仅仅 是 因为 搜索 域 刚好 在 
这 个 组 件 的 render() 方法 当中 。 事 实 上 ， 这 个 功能 应 该 放 在 更 靠近 数据 的 地 方 。 











类 似 地 ， 排 序 功能 在 之 前 属于 <Excel> 组 件 ， 因 为 排序 的 组 件 放置 在 表格 头 部 ， 并 且 表 头 的 
onClick 事件 处 理 器 负责 进行 排序 。 不 过 同样 ， 排 序 功能 最 好 也 放置 在 与 数据 相关 的 地 方 。 





那么 数据 搜索 与 排序 的 功能 应 该 放置 在 Action 还 是 Store 中 呢 ? 这 可 能 会 引起 一 些 争议 ， 
因为 这 两 种 实现 看 起 来 都 可 行 。 在 我 们 的 实现 中 ， 我 们 让 Store“ 木 偶 化 ”， 只 负责 进行 
get, set 以 及 发 送 事件 。Action 则 是 负责 加 工 数 据 的 地 方 ， 因 此 我 们 把 排序 与 搜索 功能 从 
UI 组 件 中 抽 离 出 来 ， 并 放 到 CRUDActions 模块 中 : 











/* Q@flow */ 
IE saa: Y 
const CRUDActions = { 


/* CRUD 方 法 */ 


_preSearchData: null, 





startSearching() { 
this._preSearchData = CRUDStore.getData(); 
}, 


search(e: Event) { 
const target = ((e.target: any): HTMLInputElement) ; 
const needle: string = target.value.toLowerCase(); 
if (!needle) { 
CRUDStore.setData(this._preSearchData) ; 
return; 
} 
const fields = CRUDStore.getSchema().map(item => item.id); 
if (!this._preSearchData) { 
return; 
} 
const searchdata = this._preSearchData.filter(row => { 
for (let f = 0; f < fields.length; f++) { 
if (row[fields[f]].toString().toLowerCase().indexOf(needle) > -1) { 
return true; 
} 
} 
return false; 
H3 
CRUDStore.setData(searchdata, /* commit */ false); 
F; 


_sortCallback( 
a: (string|number), b: (string|number), descending: boolean 
): number { 
let res: number = 0; 
if (typeof a === 'number' && typeof b === 'number') { 
res =a - b; 
} else { 
res = String(a).localeCompare(String(b)); 
} 


return descending ? -1 * res : res; 


}, 


sort(key: string, descending: boolean) { 
CRUDStore.setData(CRUDStore.getData().sort( 
(a, b) => this._sortCallback(a[key], b[key], descending) 


D; 
}, 


J; 


至 此 ，cRUDActtons 的 功能 已 经 完备 了 。 接 下 来 看 看 <htnepad> 和 <Excel> 组 件 是 如 何 使 
用 这 个 CRUDActions 的 。 
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你 或 许 会 认为 ， 上 述 的 search() 函数 不 应 该 放 在 CRUDActions 中 : 





search(e: Event) { 
const target = ((e.target: any): HTMLInputELement ) ; 
const needle: string = target.value.toLowerCase(); 
[* sax *] 

} 


或 许 Action 模块 不 应 该 关心 界面 的 内 容 ， 因 此 更 合理 的 处 理 方法 应 该 是 : 


search(needle: string) { 
/a 
} 
这 个 参数 看 起 来 更 加 合理 ， 你 也 确实 可 以 采用 这 种 方法 。 然 而 ， 这 种 
做 法 会 对 <nhinepad> 组 件 造 成 一 些 影响 ， 因 为 你 不 能 直接 使 用 <input 
onChange="CRUDActions.search">， 而 是 需要 进行 一 些 额 外 的 处 理 。 























8.4.3 Æ <Whinepad> 中 使 用 Action 


在 Flux Action 创建 完成 后 ， 来 看 看 <Whinepad> 组 件 目前 的 版 本 。 首 先 要 做 的 当然 是 引入 
Action 模块 : 








/* @flow */ 

JE ... */ 

import CRUDActions from '../flux/CRUDActions'; 
js | 

class Whinepad extends Component {/* ... */} 


export default Whinepad 


也 许 你 还 记得 ，Whinepad 组 件 是 负责 添加 新 记录 以 及 搜索 现 有 记录 的 〈 如 图 8-3 所 示 )。 


“JJYEIKCOTLE to W nepa A; 


Name 1? Year Grape Rating Actions 


Red rooster booster 2015 Delaware she ke ke ie G) (oN LÀ 




















8-3: Whinepad 组 件 负责 处 理 的 数据 区 域 
在 过 去 ， 当 谈 及 添加 新 记录 的 功能 时 ，Whinepad 组 件 需 要 负责 操作 自身 的 this.state.data: 





_addNew(action: string) { 


if (action === 'dismiss') { 
this.setState({addnew: false}); 
} else { 


let data = Array.from(this.state.data); 
data.unshift(this.refs.form.getData()); 
this.setState({ 

addnew: false, 


data: data, 
}); 
this._commitToStorage(data) ; 
} 
} 





不 过 目前 由 Action 模块 负责 更 新 Store ( 称 作 单一 数据 源 )， 减轻 了 Whinepad 组 件 的 负担 : 


_addNew(action: string) { 
this.setState({addnew: false}); 
if (action === 'confirm') { 
CRUDActions.create(this.refs.form.getData()); 
} 
} 


现在 不 需要 维护 更 多 的 状态 ， 也 不 需要 操作 其 他 数据 了 。 如 果 产 生 了 用 户 操作 ， 只 需要 分 
发 这 个 Action， 让 其 顺 着 单 向 的 数据 流动 即 可 。 














与 之 类 似 ， 搜 索 功能 在 过 去 也 是 通过 组 件 自身 的 this.state.data 完成 的 ， 而 现在 只 需 : 








<input 
placeholder={this.state.count === 1 
? 'Search 1 record...' 
: “Search ${this.state.count} records.... 
} 
onChange={CRUDActions.search.bind(CRUDActions) } 
onFocus={CRUDActions.startSearching.bind(CRUDActions)} /> 


8.4.4 在 <Excel> 中 使 用 Action 
Excel 组 件 需 要 使 用 CRUDActions 模块 提供 的 排序 、 删 除 、 修 改 功 能 。 我 们 之 前 的 删除 方法 
ae: 








_deleteConfirmationClick(action: string) { 


if (action === 'dismiss') { 
this._closeDialog(); 
return; 
} 
const index = this.state.dialog ? this.state.dialog.idx : null; 
invariant(typeof index === 'number', ‘Unexpected dialog state'); 


let data = Array.from(this.state.data); 
data.splice(index, 1); 
this.setState({ 
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dialog: null, 
data: data, 
}); 
this._fireDataChange(data); 
} 


现在 把 方法 修改 为 : 


_deleteConfirmationClick(action: string) { 
this.setState({dialog: null}); 
if (action === 'dismiss') { 
return; 


} 


const index = this.state.dialog && this.state.dialog.idx; 
invariant(typeof index === 'number', 'Unexpected dialog state'); 


CRUDActions.delete(index) ; 
} 





现在 不 需要 手动 触发 数据 改变 的 事件 了 ， 因 为 其 他 组 件 不 再 需要 监听 Excel 组 件 ， 只 需 订 
阅 Store 中 的 数据 改变 事件 即 可 。 此 外 也 不 再 需要 操作 this.state.data 了 ， 因 为 Action 
模块 会 代替 组 件 进行 这 些 操 作 ， 然 后 在 Store 触发 事件 时 更 新 组 件 。 














排序 与 修改 记录 的 功能 与 之 类 似 。 所 有 的 数据 操作 都 
某 一 个 方法 : 


/* @flow */ 


Jean 




















只 需要 修改 为 调用 CRUDActions 中 的 


import CRUDActions from '../flux-imm/CRUDActions' ; 


LO soe eT] 
class Excel extends Component { 
[Sack] 


_sort(key: string) { 


const descending = this.state.sortby === key && !this.state.descending; 


CRUDActions.sort(key, descending); 
this.setState({ 
sortby: key, 
descending: descending, 
H); 
} 


_save(e: Event) { 
e.preventDefault(); 


invariant(this.state.edit, 'Messed up edit state'); 


CRUDActions.updateField( 
this.state.edit.row, 
this.state.edit.key, 
this.refs.input.getVaLlue() 

)3 





this.setState({ 
edit: null, 


IDH 
} 


_saveDataDialog(action: string) { 
this.setState({dialog: null}); 


if (action === 'dismiss') { 
return; 

} 
const index = this.state.dialog && this.state.dialog.idx; 
invariant(typeof index === 'number', ‘Unexpected dialog state'); 
CRUDActions.updateRecord(index, this.refs.form.getData()); 

} 

JE sw */ 

J; 


export default Excel 


Whinepad 应 用 迁移 到 Flux 架构 的 完整 版 本 可 以 从 本 书 附带 的 代码 库 
(https:// github.com/stoyan/reactbook/) 中 下 载 。 





8.5 Flux 回顾 


目前 为 止 ， 我 们 已 经 把 应 用 迁移 到 了 Flux 架构 中 (尽管 还 显得 有 些 粗 糙 ) 。 你 让 View 发 
ceca el mews 更 新 单一 Store 并 发 送 事件 。View 需要 监听 对 应 的 事件 并 负责 


进行 更 新 。 这 就 形成 了 一 个 完整 的 循环 。 
这 种 思想 还 有 一 些 延 伸 ， 能 帮助 你 更 好 地 应 对 应 用 规模 增长 。 

















Action 不 仅 局 限于 由 View 发 送 (如 图 8-4 所 示 )， 还 可 以 来 源 于 服务 端 。 比 如 以 下 这 些 情 
况 : 某 些 数据 过 时 ， ace, 其 他 用 户 改变 了 某 些 数据 ， 而 应 用 需要 从 服务 器 同步 数 
据 ， 随 着 时 间 推 移 ， 需 要 采取 一 些 操作 ( 买 票 后 没有 在 一 定时 间 内 付款 ， 会 话 过 期 后 需要 
重新 购买 ) 。 




















图 8-4; 更 多 的 Action 
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当 你 碰 到 这 种 需要 处 理 不 同 来 源 的 Action 时 ， 单 一 Dispatcher 的 概念 就 变 得 很 有 帮助 了 
(如 图 8-5 所 示 )。Dispatcher 负责 管理 所 有 Action， 并 将 其 传递 到 单个 Store 中 (也 可 能 是 





多 个 Store) 。 


















8-5: Dispatcher 


在 一 些 功能 更 丰富 的 应 用 中 ， 你 还 会 遇 到 更 多 不 同 的 Action。 它 们 可 能 来 源 于 UI、 服 务 器 
或 者 某 些 别 的 地 方 ， 因 此 需要 多 个 Store 负责 处 理 各 自 对 应 的 数据 (如 图 8-6 所 示 )。 





























8-6: 复杂 的 单 向 流 


Flux 架构 的 实现 还 有 许多 开源 的 版 本 。 在 一 开始 ， 你 可 以 先 从 简单 的 版 本 入 手 。 随 着 应 用 
规模 增长 ， 你 可 以 选择 继续 改进 自己 实现 的 版 本 或 者 选择 一 种 开源 的 解决 方案 。 





8.6 immutable 

在 本 书 的 最 后 ， 我 们 介绍 一 个 关于 Flux 中 Store 和 Action 的 修改 方案 ， 把 酒 类 的 数据 记 
录 切 换 到 不 可 变 的 数据 结构 。 在 React 应 用 中 ，immutable 是 一 个 常见 的 主题 ， 尽 管 它 和 
React 本 身 并 没有 什么 关联 。 

immutable 对 象 在 创建 后 是 不 能 更 改 的 。 在 通常 情况 下 ，immutable 对 象 比 普通 对 象 更 加 容 
易 理 解 与 推理 。 比 如 ， 字 符 串 类 型 背后 的 原理 就 是 通过 immutable 对 象 实现 的 。 





























在 JavaScript 中 ， 可 以 通过 npn 安装 immutable 包 实 现 这 个 功能 : 


$ npm i --save-dev immutable 
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更 新 flowconfig 文件 : 
| rere 
[include] 
本 


node_modules/immutable 


# ... 


immutable 库 提 供 了 在 线 文 要 ， 参 见 http://facebook.github.io/immutable-js/。 




















因为 所 有 的 数据 处 理 都 发 生 在 Store 和 Action 中 ， 所 以 只 有 这 两 处 需要 更 新 。 











8.6.1 immutable 存储 数据 


immutable 库 提 供 了 List, Stack 和 Map 等 数据 类 型 。 我 们 首先 介绍 List， 因 为 这 和 我 们 之 
前 在 应 用 中 使 用 的 数组 类 型 相似 : 














/* @flow */ 


import {EventEmitter} from 'fbemitter'; 
import {List} from 'immutable'; 


let data: List<Object>; 
let schema; 
const emitter = new EventEmitter(); 





现在 data 变量 被 定义 为 immutable 中 的 List 类 型 。 


可 以 通过 let list = List() 创建 新 的 列表 ， 并 传递 一 些 初始 值 。 我 们 看 看 Store 现在 是 如 
何 初始 化 列表 的 : 
const CRUDStore = { 


init(initialSchema: Array<Object>) { 
schema = initialSchema; 


const storage = 'localStorage' in window 
? localStorage.getItem('data') 
: null; 


if (!storage) { 
let initialRecord = {}; 
schema. forEach(item => initialRecord[item.id] = item.sample); 
data = List([initialRecord]); 

} else { 





Flux | 183 


data = List(JSON.parse(storage)); 
} 
}; 


/* 2... */ 

F 
如 你 所 见 ， 列 表 使 用 了 一 个 数组 进行 初始 化 。 初 始 化 完成 后 ， 就 可 以 使 用 列表 的 API 进行 
数据 操作 。 此 外 ， 一旦 列表 完成 创建 ， 这 个 列表 就 是 不 可 变 的 ， 不 能 被 修改 。( 但 所 有 的 
数据 操作 都 发 生 在 CRUDActions 中 ， 随 后 你 将 会 看 到 具体 代码 。) 








>H 


在 Store 中 ， 除 了 修改 数据 初始 化 和 类 型 注解 以 外 ， 不 需要 进行 太 多 其 他 的 修改 一 一 
Store 要 做 的 全 部 工作 仅仅 关于 set 和 get, 








为 








需要 在 getCount() 方法 中 进行 一 点 修改 ， 因 为 immutable 中 的 列表 没有 Length 属性 : 


// 修改 前 
getCount(): number { 
return data. length; 


} 


// 修改 后 
getCount(): number { 

return data.count(); // 也 可 以 使 用 data.size 获 取 
Fo 





最 后 需要 修改 getRecord() 方法 ， 因 为 immutable 库 不 能 像 内 建 的 数据 类 型 那样 通过 数组 
下 标 进行 取 值 : 


// 修改 前 
getRecord(recordId: number): ?0bject { 
return recordiId in data ? data[recordId] : null; 


Js 


// 修改 后 

getRecord(recordId: number): ?0bject { 
return data.get(recordId); 

Fo 


8.6.2 immutable 数据 操作 
首先 回顾 一 下 JavaScript 中 的 字符 串 方 法 : 


let hi "Hello'; 

let ho = hi.toLowerCase(); 
hi; // "Hello" 

ho; // "hello" 








赋值 给 hi 变量 的 字符 串 不 会 发 生变 化 。 当 需要 修改 字符 串 时 ， 会 创建 一 个 新 的 字符 串 。 
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immutable 中 的 列表 类 型 也 是 这 样 : 





let list = List([1, 2]); 

let newlist = list.push(3, 4); 

list.size; // 2 

newlist.size; // 4 

list.toArray(); // Array [ 1, 2 ] 
newlist.toArray() // Array [ 1, 2, 3, 4 ] 




















Action 中 发 生 。 





事实 上 ， 数 据 结构 的 变化 对 于 Action 模块 的 影响 并 不 大 。 


注意 到 push() 方法 了 吗 ? 对 于 immutable 中 的 列表 ， 其 大 部 分 方法 和 原生 数 
组 类 型 中 的 方法 类 似 ， 比 如 map() 和 forEach() 等 方法 依然 是 可 用 的 。 这 也 
是 应 用 的 UI 逻辑 不 需要 进行 修改 的 真正 原因 。 
号 访问 数组 元 素 的 地 方 。) 另 一 个 原因 如 前 文 所 述 : 数组 处 理 主要 在 Store 和 








(准确 地 说 ， 只 需要 修改 方 括 














因为 immutable 中 的 列表 还 提供 


了 sort() 和 filter() 方 法， 所 以 排序 与 搜索 方法 不 需要 修改 。 需 要 修改 的 只 有 create()、 


delete() 和 两 个 update*() 方法 。 
思考 如 下 delete() 方法 : 
/* Q@flow */ 


import CRUDStore from './CRUDStore'; 
import {List} from 'immutable'; 


const CRUDActions = { 
/* ... */ 
delete(recordId: number) { 
// 修改 前 : 
// let data = CRUDStore.getData(); 


// data.splice(recordiId, 1); 
// CRUDStore.setData(data); 


// 修改 后 : 
let data: List<Object> = CRUDStore.getData(); 
CRUDStore. setData(data.remove(recordId)); 
}, 
[E wae *] 
J; 


export default CRUDActions; 


JavaScript 中 的 splice() 方法 名 字 有 点 古怪 。 这 个 方法 既 会 返回 原 数 组 中 的 某 一 部 分 ， 又 
会 修改 原 有 的 数组 。 把 这 两 种 操作 写 在 同一 行 中 ， 难 免 会 引起 混淆 。 不 过 ，immutable 列 
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表 中 的 方法 可 以 使 用 一 行 写法 且 不 会 引起 混淆 。 如 果 我 们 不 进行 类 型 注解 的 话 ， 还 可 以 将 
其 简化 为 : 





delete(recordId: number) { 
CRUDStore. setData(CRUDStore.getData().remove(recordId)); 


} 


在 immutable 世界 中 ，remove() 方法 的 命名 非常 合理 。 这 个 方法 不 会 影响 原 有 的 列表 ， 项 
为 原 列 表 是 不 可 变 的 。remove() 方法 会 返回 一 个 新 列表 ， 并 移 除 原 列 表 中 的 某 个 元 素 。 然 
后 你 可 以 把 这 个 新 列表 保存 到 Store 中 。 


其 他 的 数据 处 理 方法 也 与 之 类 似 ， 比 直接 操作 数组 更 为 简单 


/* ... */ 
create(newRecord: Object) { // 和 数组 类 似 ,使 用 unshift() 方 法 
CRUDStore.setData(CRUDStore.getData().unshift(newRecord)); 


} 



































updateRecord(recordId: number, newRecord: Object) { // 使 用 set() 方 法 代替 [] 
CRUDStore.setData(CRUDStore.getData().set(recordId, newRecord)); 


} 


updateField(recordId: number, key: string, value: string|number) { 
let record = CRUDStore.getData().get(recordId); 
record[key] = value; 
CRUDStore.setData(CRUDStore.getData().set(recordId, record)); 

}, 

[® ax] 


大 功 告 成 ! 现在 ， 你 的 应 用 中 使 用 了 下 列 技术 栈 ; 


。 React 组件， 用 于 定义 UI; 

。 JSX， 用 于 组 合 组 件 ; 

。 Flux， 用 于 组 织 数 据 流 ，; 

。 不 可 变数 据 ， 

e Babel， 帮 助 我 们 使 用 最 新 的 ECMAScript 特性 ，; 
。 Flow， 用 于 进行 类 型 检查 和 语法 检查 ， 

。 ESLint， 用 于 检查 更 多 的 错误 与 代码 约定 ，; 

。 Jest， 用 于 进行 单元 测试 。 


和 之 前 一 样 ， 你 可 以 在 本 书 附带 的 代码 库 (https://github.com/stoyan/reactbook/) 
中 获取 这 个 Whinepad 应 用 的 第 三 个 版 本 (使 用 了 immutable)。 还 可 以 在 
http://whinepad.com 在 线 体验 这 个 应 用 。 
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关于 封面 

ABS GLYNDWR EEE, BO reece A 关于 这 种 动物 的 作业 报告 后 ， 
选择 它 作 为 本 书 的 封面 动物 。 镰 嘴 管 去 稚 在 夏威夷 岛屿 最 常见 的 本 土 鸟 类 中 排名 第 三 ， 但 
是 其 家 族 中 的 许多 物种 已 经 灭绝 或 濒临 灭绝 。 这 种 颜 eas PR BRERAGEALMR 
岛 、 茂 宜 岛 和 可 爱 岛 ， 是 夏威夷 地 区 的 标志 性 象征 。 





成 年 的 镶 嘴 管 毛 惟 多 数 是 鲜红 色 的 ， 带 有 黑色 的 起 膀 和 尾巴 唉 弯曲 。 由 于 鲜红 色 与 周转 
的 绿色 叶子 形成 了 鲜明 的 对 比 ， 镰 嘴 管 去 管 在 野外 非常 容易 办 认 。 尽 管 其 羽毛 被 广泛 用 于 
装饰 夏威夷 贵族 的 斗 杷 和 头盔 ， 但 镰 嘴 管 舌 睦 还 没有 到 濒临 灭绝 的 地 步 。 这 是 因为 当地 人 
认为 它 与 其 近亲 夏威夷 监督 吸 蜜 鸟 相 比 显 得 没 那 么 神圣 。 


镰 嘴 管 舌 稚 主 要 以 花 守 和 多 型 铁心 木 为 食 ， 偶 尔 也 吃 一 些小 昆虫 。 灸 嘴 管 舌 稚 还 会 进行 重 
直 迁 从 ,一 年 四 季 都 会 跟随 开花 的 时 间 进 行 海 拔高 度 上 的 迁 人 和 从。 这 意味 着 贸 嘴 管 吉 稚 会 在 
岛 巾 之 间 迁 徙 ， 但 因为 生态 环境 的 破坏 ， 镰 嘴 管 舌 稚 在 瓦 胡 岛 和 莫 洛 凯 岛 非常 罕见 ， 而 且 
自 1929 年 就 已 经 在 拉 奈 岛 绝 迹 了 。 


为 了 保护 现存 的 镰 嘴 管 舌 睦 种 群 ， 人 们 已 经 采取 了 一 些 举措 。 这 种 鸟 类 非常 容易 感染 鸟 痊 
和 禽 流 感 ， 此 外 还 会 遭受 砍伐 森林 和 外 来 入 侵 植物 的 影响 。 因 为 野猪 挖 的 泥 坑 会 滋生 晓 
忠 ， 所 以 封锁 森林 区 域 有 助 于 控制 蚊子 传播 疾病 。 目 前 正在 进行 的 工作 还 包括 恢复 森林 和 
aR Sb RA FP, LARA AS RH EE SKA EH EAP RAT, O'Reilly 封面 上 的 许多 
动物 都 已 经 濒临 灭绝 ， 然 而 每 一 种 物种 对 于 地 球 都 非常 重要 。 要 想 知 道 如 何 为 此 贡献 你 的 
一 份 力量 ， 请 到 animals.oreilly.com 进一步 了 解 。 


封面 图 片 来 自 Wood 的 Ilustrated Natural History 一 书 。 
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React 快 速 上 手 开发 


本 书 旨 在 帮 你 掌握 Facebook 的 开源 技术 React， 迅 速 建立 富 Web 应 用 ， 构 
建 组 件 并 将 其 组 织 成 可 维护 的 大 型 应 用 程序 。 


解 开 Web 应 用 开发 之 庶 ， 从 了 解 React 基 本 原理 开始 。 


E 设置 React 并 编写 第 一 个 Hello World 应 用 

E 创建 并 使 用 自 定义 React 组 件 以 及 通用 DOM 组 件 

E 构建 一 个 可 以 编辑 、 排 序 、 搜 索 和 导出 内 容 的 数据 表格 组 件 
E 使 用 JSX 语 法 扩展 作为 调用 函数 的 替代 选择 

© 设置 一 个 帮 你 集中 注意 力 于 React 上 的 简单 构建 过 程 

8 构建 一 个 可 以 将 数据 存储 在 客户 端的 完整 自 定义 应 用 


E 在 应 用 规模 增长 时 使 用 ESLint、Flow 和 Jest 等 工具 检查 并 测试 代 
码 


E 使 用 Flux 管 理 组 件 间 的 通信 


Stoyan Stefanov，Facebook 开 发 工程 师 ， 图 像 优 化 工具 smush.it 的 作者 ， 
性 能 优化 工具 YSslow2.0 的 架构 师 。 曾 多 次 在 Velocity 等 技术 大 会 上 发 表 过 演 
讲 。 另 著 有 《JavaScript 模 式 》 和 《JavaScript 面 向 对 象 编 程 指 南 》 ， 还 为 
《高 性 能 网 站 建设 进 阶 指南 》 和 《高 性 能 JavaScript》 贡献 过 内 容 。 个 人 站 
点 是 http://phpied.com。 
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